select2レンダリング方法のバックボーンビュー

Question

Select2を使用して選択入力をレンダリングすると予想されるバックボーンビューがあります。

Select2Cell = Backbone.View.extend({ 

    tagName: "select", 

    initialize: function(options) { 
     this.data = options.data; 
    }, 

    render: function() { 
     this.$el.select2({data: this.data}); 
     return this; 
    } 
}); 

私は別のビューのrender()内でこのビューをレンダリングしています：

CellsContainerView = Backbone.View.extend({ 
    render: function() { 
     var view = new Select2Cell({data: [{id: 1, text: "Item 1"}]}); 
     this.$el.append(view.render().$el); 
     return this; 
    } 
}); 

問題がある、私はCellsContainerViewをレンダリングするとき、それはSELECT2は表示されません。

$(document).ready(function() { 
    var containerView = new CellsContainerView({el: "#container"}); 
    containerView.render(); 
}); 

Answer 1

OPは彼のコードにタイプミスを修正する前にこの答えは書かれていました。

Select2 dataは、配列のオブジェクトである必要があります。無効な配列を渡し、行方不明括弧{}に気づくいる：

[id: 1, text: "Item 1"] 

だから、選択ビューに渡されるオプションは次のように変更します。

{ data: [{ id: 1, text: "Item 1" }]} 

ここで修正して、あなたのコードのデモです：

var Select2Cell = Backbone.View.extend({ 
 
    tagName: "select", 
 

 
    initialize: function(options) { 
 
    this.data = options.data; 
 
    }, 
 

 
    render: function() { 
 
    this.$el.select2({ 
 
     data: this.data 
 
    }); // there was also a missing closing brace here 
 
    return this; 
 
    } 
 
}); 
 

 
var CellsContainerView = Backbone.View.extend({ 
 
    render: function() { 
 
    var view = new Select2Cell({ 
 
     data: [{ 
 
     id: 1, 
 
     text: "Item 1" 
 
     }] 
 
    }); 
 
    this.$el.append(view.render().el); 
 
    return this; 
 
    } 
 
}); 
 

 
var containerView = new CellsContainerView({ 
 
    el: "#container" 
 
}); 
 
containerView.render();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> 
 

 
<div id="container"></div>