Bagaimana memicu penyegaran dalam modal media


12

Saya sedang mengembangkan plugin yang menambahkan tab baru ke modal media, dan saya perlu tahu cara memicu penyegaran tab lampiran sehingga itu menunjukkan lampiran yang baru ditambahkan. Ini adalah kode yang saya gunakan:

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
    }
});

Bantuan apa pun akan dihargai. Dokumentasi modal media hampir tidak ada.

Terima kasih


IIRC itu hanya tampilan Backbone / Garis Bawah. Dengan kata lain, ketika Anda memperbarui model, itu harus memperbarui tampilan dengan sendirinya karena "ModelView" akan memicu itu.
kaiser

Yah, this.controller.state().addAttachment()fungsinya hanya menggunakan panggilan AJAX wp.media.post(), jadi saya perlu memicu acara "model updated" hipotetis di suatu tempat setelah panggilan AJAX ini. Ada ide?
leemon

"Ada ide?" - saat ini, tidak. Ini adalah sesuatu di mana saya harus menginvestasikan cukup banyak waktu untuk membaca inti (yang tidak saya miliki sekarang). Tentang komentar Anda: Ada MarkDown tersedia (Lihat "bantuan" di bawah "tambahkan komentar" tombol).
kaiser

Jawaban:


2

Anda dapat memeriksa tautan ini 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

Mencoba:

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

Sepertinya harus ada cara yang lebih mudah tetapi itu bekerja untuk saya sementara itu!

Cara yang lebih baik untuk melakukannya:

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

dalam hal ini saya sedang menyegarkan tab galeri.

Coba kedua kode di atas dan lihat mana yang paling cocok untuk Anda.


1
Ini sangat membantu saya! Terima kasih.
Siddhesh Shirodkar

1
ya ini bekerja untuk saya juga.
Amol Bhandari SJ
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.