[英]Cascading Select elements with Backbone.js
我的應用程序中有一個向導視圖,可引導用戶瀏覽一系列簡短的屏幕,最終創建一個用於測試/演示目的的模擬銷售。 當用戶從下拉框中選擇一個場所時,我想使用該場所的交易來渲染另一個下拉列表。
但是,當我嘗試此操作時,“交易”下拉菜單始終為空。 考慮到這可能是render()問題,因此我選擇插入代碼以顯示選擇場所后的交易數量,並且效果很好。
MockSaleView.html
<select id="venue-select" class="selectpicker" data-live-search="true"></select><br/>
<select id="deal-select" class="selectpicker"></select><br/>
<div id ="deal-count"></div>
MockSaleView.js
window.MockSaleView = Backbone.View.extend({
initialize: function () {
this.render();
},
render: function () {
this.$el.html(this.template());
for (var i = 0; i < venues_collection.length; i++) {
$('#venue-select', this.el).append('<option value="'+venues_collection.models[i].toJSON()._id+'">'+venues_collection.models[i].toJSON().name+'</option>');
}
// Events
$('#venue-select', this.el).on("change", this.venueSelectionChanged);
$('#deal-select', this.el).on("change", this.dealSelectionChanged);
return this;
},
venueSelectionChanged: function(e){
var field = $(e.currentTarget);
var venue_id = $("option:selected", field).val();
var _deals = deals_collection.where({venue: venue_id});
$('#deal-count').html(deals.length+' deals');
var dropdown = new DropdownView({
el: $('#deal-select'),
model: new Backbone.Model({
deals: _deals
})
});
dropdown.render();
},
});
更新#1:
更新了placementSelectionChanged(),以利用一個DropdownView來基於集合創建一個小部件。 我可以在代碼中看到正確創建HTML的位置,但無法呈現。 當我在MockSaleView的render()函數中測試視圖並能夠將this.el傳遞給MockSaleView時,它將正確呈現。 抱歉,對於Backbone來說,我仍然是新手。
由於我使用的是引導程序選擇器插件,因此它會渲染Select選項,因此有必要在更新值之后調用refresh。
$('#deal-select').selectpicker('refresh');
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.