web-dev-qa-db-ja.com

Jqueryリスナーを使ってメディアアップローダーにフィールドを追加する

それで、私は自分のメディアアップローダ（ギャラリービュー）にselectフィールドをうまく追加するコードを持っていますが、そのフィールドにjqueryリスナーを追加する必要もあります。

私は私のマークアップとjsを追加するために 'print_media_templates'フックを使用しています、そして私は、showまたはwhateverを使って別のフィールドを切り替える、selectフィールド.js--gallery-styleにjQueryリスナーを追加したいです。

function add_gallery_type_option(){


  ?>
  <script type="text/html" id="tmpl-my-custom-gallery-setting">
    <label class="setting">
      <span><?php _e('Gallery Style'); ?></span>
      <select class="js--gallery-style" data-setting="gallery_style">
        <option value="default"> Grid (default) </option>
        <option value="slider"> Slider </option>
      </select>
    </label>
  </script>

  <script>

    jQuery(document).ready(function(){


      _.extend(wp.media.gallery.defaults, {
        my_custom_attr: 'default_val'
      });

      // merge default gallery settings template with yours
      wp.media.view.Settings.Gallery = wp.media.view.Settings.Gallery.extend({
        template: function(view){
          return wp.media.template('gallery-settings')(view)
               + wp.media.template('my-custom-gallery-setting')(view);
        }
      });

    });

  </script>
  <?php
}
add_action('print_media_templates', 'add_gallery_type_option');

これはかなり簡単であると確信していますが、backbone.jsをまだ学習していないので、どこから見ればよいかわかりません。

jquerymedia-librarymedia-modalbackbone
2
rugbert

Blackbone.js のWebサイトから：

renderは、その要素（this.el）に適切なHTMLを追加するためにビューがオーバーライドする必要がある中心的な機能です。慣例として、renderは常にこれを返すようになっています。

そのため、jQuery変更リスナーを追加するようにコードを少し修正しました。

function add_gallery_type_option(){
  ?>
  <script type="text/html" id="tmpl-my-custom-gallery-setting">
    <label class="setting">
      <span><?php _e('Gallery Style'); ?></span>
      <select class="js--gallery-style" data-setting="gallery_style">
        <option value="default"> Grid (default) </option>
        <option value="slider"> Slider </option>
      </select>
    </label>
  </script>

  <script>

    jQuery(document).ready(function(){
      _.extend(wp.media.gallery.defaults, {
        my_custom_attr: 'default_val'
      });

      // merge default gallery settings template with yours
      wp.media.view.Settings.Gallery = wp.media.view.Settings.Gallery.extend({
        template: function(view){
          return wp.media.template('gallery-settings')(view)
               + wp.media.template('my-custom-gallery-setting')(view);
        },
        render: function() {
                wp.media.View.prototype.render.apply( this, arguments );

                jQuery(this.$('.js--gallery-style')).change(function(e)
                  {
                      alert(jQuery(this).val());
                  })
                return this;
            }
      });

    });

  </script>
  <?php
}
add_action('print_media_templates', 'add_gallery_type_option');
3
kalimah-apps