Làm thế nào để kích hoạt làm mới trong phương thức truyền thông


12

Tôi đang phát triển một plugin bổ sung một tab mới vào phương thức truyền thông và tôi cần biết một cách kích hoạt làm mới tab đính kèm để nó hiển thị các tệp đính kèm mới được thêm vào. Đây là mã tôi đang sử dụng:

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

Bất kỳ trợ giúp sẽ được đánh giá cao. Các tài liệu phương thức truyền thông gần như không tồn tại.

Cảm ơn


IIRC chỉ là các khung nhìn Backbone / Underscore. Nói cách khác, khi bạn cập nhật mô hình, nó sẽ tự cập nhật chế độ xem vì "ModelView" sẽ kích hoạt điều đó.
kaiser

Chà, this.controller.state().addAttachment()chức năng này chỉ là một cuộc gọi AJAX đang sử dụng wp.media.post(), vì vậy tôi cần kích hoạt một sự kiện "mô hình được cập nhật" giả định ở đâu đó sau cuộc gọi AJAX này. Có ý kiến ​​gì không?
leemon

"Có ý kiến ​​gì không?" - hiện tại, không. Đây là điều mà tôi phải đầu tư khá nhiều thời gian để đọc qua cốt lõi (mà bây giờ tôi không có). Về nhận xét của bạn: Có sẵn MarkDown (Xem nút "trợ giúp" bên dưới "thêm bình luận").
kaiser

Câu trả lời:


2

Bạn có thể kiểm tra liên kết này 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

Hãy thử:

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

Có vẻ như phải có một cách dễ dàng hơn nhưng điều đó có hiệu quả với tôi trong lúc này!

Một cách tốt hơn để làm điều đó:

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

trong trường hợp này tôi đang làm mới tab thư viện.

Hãy thử cả hai mã trên và xem mã nào phù hợp nhất với bạn.


1
Điều này rất hữu ích cho tôi! Cảm ơn.
Siddhesh Shirodkar

1
vâng điều này làm việc cho tôi quá.
Amol Bhandari SJ
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.