วิธีเปิดใช้งานการรีเฟรชในโมดอลสื่อ


12

ฉันกำลังพัฒนาปลั๊กอินที่เพิ่มแท็บใหม่ให้กับโมดอลมีเดียและฉันจำเป็นต้องรู้วิธีที่จะทำให้รีเฟรชแท็บไฟล์แนบเพื่อที่จะแสดงไฟล์แนบที่เพิ่งเพิ่มเข้าไปใหม่ นี่คือรหัสที่ฉันใช้:

wp.media.view.Toolbar.Custom = wp.media.view.Toolbar.extend({
    initialize: function() {
        _.defaults( this.options, {
            event: 'custom_event',
            close: false,
            items: {
                custom_event: {
                    text: wp.media.view.l10n.customButton,
                    style: 'primary',
                    priority: 80,
                    requires: false,
                    click: this.addAttachment
                }
            }
        });

        wp.media.view.Toolbar.prototype.initialize.apply( this, arguments );
    },

    // triggered when the button is clicked
    addAttachment: function(){
        this.controller.state().addAttachment();
        this.controller.setState( 'insert' );
        // I NEED TO TRIGGER A REFRESH OF THE ATTACHMENTS TAB HERE
    }
});

ความช่วยเหลือใด ๆ ที่จะได้รับการชื่นชม เอกสารสื่อ modal เกือบจะไม่มีอยู่

ขอบคุณ


IIRC เป็นเพียง Backbone / Underscore views กล่าวอีกนัยหนึ่งเมื่อคุณอัปเดตโมเดลควรอัปเดตมุมมองด้วยตัวเองตามที่ "ModelView" ควรเรียกใช้
ไกเซอร์

Well, this.controller.state().addAttachment()ฟังก์ชั่นเป็นเพียงโทร AJAX ใช้wp.media.post()ดังนั้นฉันจะต้องก่อให้เกิด "รูปแบบการปรับปรุง" สมมุติเหตุการณ์ที่ไหนสักแห่งหลังจากที่โทร AJAX นี้ ความคิดใด ๆ
leemon

"มีความคิดอะไรเหรอ?" - ปัจจุบันไม่มี นี่คือสิ่งที่ฉันจะต้องลงทุนค่อนข้างจะต้องอ่านผ่านแกนกลาง (ซึ่งตอนนี้ฉันยังไม่มี) เกี่ยวกับความคิดเห็นของคุณ: มี MarkDown (ดูที่ "ความช่วยเหลือ" ด้านล่าง "เพิ่มความคิดเห็น" ปุ่ม)
ไกเซอร์

คำตอบ:


2

คุณสามารถเช็คเอาต์ลิงค์นี้https://codex.wordpress.org/Javascript_Reference/wp.media

jQuery(function($){

  // Set all variables to be used in scope
  var frame,
      metaBox = $('#meta-box-id.postbox'), // Your meta box id here
      addImgLink = metaBox.find('.upload-custom-img'),
      delImgLink = metaBox.find( '.delete-custom-img'),
      imgContainer = metaBox.find( '.custom-img-container'),
      imgIdInput = metaBox.find( '.custom-img-id' );

  // ADD IMAGE LINK



addImgLink.on( 'click', function( event ){

    event.preventDefault();

    // If the media frame already exists, reopen it.
    if ( frame ) {
      frame.open();
      return;
    }

    // Create a new media frame
    frame = wp.media({
      title: 'Select or Upload Media Of Your Chosen Persuasion',
      button: {
        text: 'Use this media'
      },
      multiple: false  // Set to true to allow multiple files to be selected
    });


    // When an image is selected in the media frame...
    frame.on( 'select', function() {

      // Get media attachment details from the frame state
      var attachment = frame.state().get('selection').first().toJSON();

      // Send the attachment URL to our custom image input field.
      imgContainer.append( '<img src="'+attachment.url+'" alt="" style="max-width:100%;"/>' );

      // Send the attachment id to our hidden input
      imgIdInput.val( attachment.id );

      // Hide the add image link
      addImgLink.addClass( 'hidden' );

      // Unhide the remove image link
      delImgLink.removeClass( 'hidden' );
    });

    // Finally, open the modal on click
    frame.open();
  });


  // DELETE IMAGE LINK
  delImgLink.on( 'click', function( event ){

    event.preventDefault();

    // Clear out the preview image
    imgContainer.html( '' );

    // Un-hide the add image link
    addImgLink.removeClass( 'hidden' );

    // Hide the delete image link
    delImgLink.addClass( 'hidden' );

    // Delete the image id from the hidden input
    imgIdInput.val( '' );

  });

});

1

ลองดู:

wp.media.editor.get(wpActiveEditor).views._views[".media-frame-content"][0].views._views[""][1].collection.props.set({ignore:(+(new Date()))})

ดูเหมือนว่าจะต้องมีวิธีที่ง่ายกว่า แต่ก็ใช้ได้กับฉันในเวลาเดียวกัน!

วิธีที่ดีกว่าที่จะทำ:

wp.media.frame.content.get('gallery').collection.props.set({‌​ignore: (+ new Date())});, 

ในกรณีนี้ฉันกำลังรีเฟรชแท็บคลังภาพ

ลองใช้รหัสทั้งสองข้างบนและดูว่ารหัสใดเหมาะกับคุณ


1
สิ่งนี้มีประโยชน์สำหรับฉัน! ขอบคุณ
Siddhesh Shirodkar

1
ใช่มันก็ใช้ได้กับฉันเช่นกัน
Amol Bhandari SJ
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.