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，它不會顯示選擇2。

$(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>