1

Backbone.jsアプリケーションで複数選択のjQueryプラグインを動作させるための魔法のトリックは何ですか? SumoSelect、Bootstrap-Multiselect、Chosen、および jQuery UI の MultiSelect を使用しようとしました。

モデルがあり、それはコレクションです。以下のコードを使用して、View の render メソッドで SumoSelect プラグインなどを設定しています。

render : function() {   
....

    // Time for DOM
    setTimeout(function(){
      $(".dropdown-features", this.$el).SumoSelect()
    }, 100);

    return this;                            
},

クラスdropdown-featuresは、このようにテンプレートファイルで定義されています

<div class="filter-header">
    <strong>${title}</strong>       
</div>              
        <div>
            <select class="dropdown-features">                   
                <option value="">Choose...</option>
            </select>
        </div>          
</div>

Model と Collection は Backbone.js アプリケーションのように通常定義されます。

MyApp.Models = MyApp.Models || {};

(function () {
    'use strict';

    MyApp.Models.Facet = Backbone.Model.extend({

        idAttribute: "name"
    });

})();

と

MyApp.Collections = MyApp.Collections || {};

(function () {
    'use strict';

    MyApp.Collections.Facets = Backbone.Collection.extend({

        model: MyApp.Models.Facet,

        initialize : function(models, options) {
            if (_.isUndefined(options) ||
                _.isUndefined(options.label) ||
                _.isUndefined(options.title)) {
                throw new Error('Label and title must be given Facets collection in initialization.');
            } else {
                this.label = options.label;
                this.title = options.title;
            }
        },

        getName: function() {
            return this.title;
        },

        getLabel: function() {
            return this.label;
        },

        getFirstLabel: function() {
            return this.first().get('name');
        }
    });    
})();

純粋な HTML 選択タグを使用するとすべて正常に動作しますが、上記のプラグインを使用しようとすると、選択オプションにデータを取得できません。選択ウィジェットは新しいスタイルに変更されますが、「Choose...」以外は何も含まれていません。

私はかなり新しい Backbone.js ユーザーで、Backbone.js アプリケーションで UI プラグインを使用したことがありません。

ありがとう、

マイク

4

2 に答える 2

0

これは範囲の問題かもしれません...

// Time for DOM
setTimeout(function(){
  $(".dropdown-features", this.$el).SumoSelect()
}, 100);

this.$el はおそらく未定義です。これは機能しますか？

var _this = this;

// Time for DOM
setTimeout(function(){
  $(".dropdown-features", _this.$el).SumoSelect()
}, 100);

または私の個人的な好み：

var _this = this;

// Time for DOM
setTimeout(function(){
  _this.$el.find('.dropdown-features').SumoSelect()
}, 100);
于 2016-01-11T21:36:23.827 に答える
0

私は問題を見つけ、少し時間がかかりましたが、私はそれを手に入れました。これらのフレームワークはすべて簡単な方法を取っているようです (私はそれらを責めるのではなく、同じことをしたはずです) $(<element you give it>).parent()。elDOM。ソリューション:

  • あなたはどちらかを使用することができますsetTimeout（私のティーカップではありません。後でデバッグするのは醜くて難しいです）
  • ラッパーを作成できます（<div>あなたの周りに を追加するだけです<select>）
  • あなたはそれが必要な場所にそれを取り付けることができますTHENコールSumoSelect()または同等のもの

例 1:

setTimeout私はあなたがそれを習得したと思うので、あなたにその方法を示すつもりはありません.

例 2:

var WrapperView = Backbone.View.extend({
  tagName: 'div', // <<< ----------------- look here
  template: _.template('<option value="<%=value%>"><%=name%></option>'),
  initialize: function() {
    this.render();
  },
  render: function() {
    var view = this;
    var select = $('<select>');
    view.$el.append(select);
    myCollection.each(function(model){
      select.append(view.template(model.toJSON()));
    });
    select.SumoSelect(); // <<< ----------------- look here
    return this.el;
  }
});

$('body').append((new WrapperView()).el);

例 3:

var WaitView = Backbone.View.extend({
  tagName: 'select', // <<< ----------------- look here
  template: _.template('<option value="<%=value%>"><%=name%></option>'),
  initialize: function() {
    this.render();
  },
  render: function() {
    var view = this;
    myCollection.each(function(model){
      view.$el.append(view.template(model.toJSON()));
    });
    return this.el;
  }
});

var waitview = new WaitView();
$('body').append(waitview.el);
waitview.$el.SumoSelect(); // <<< ----------------- look here

個人的には、オプション 2 が一番好きです。最もコンパクトなオプションです。オプション 1 は情熱を持って嫌いです。オプション 3 は忘れてしまい、3 か月後に戻ってきて、地獄のように混乱することを保証できます。しかし、最終的にはあなたの決断です。実際の例 2 と 3 を次に示します: http://jsfiddle.net/ghcp2g2t/4/

PS.次にJSの質問をするときは、jsfiddleまたは問題のテスト環境をすぐに使用できるものを追加してください.CDN URLを追跡してテストをセットアップするには、多くの時間がかかります.

于 2016-01-11T17:30:52.550 に答える