使用Backbone.js級聯選擇元素

我在我的應用程序中有一個嚮導視圖，可以讓用戶瀏覽一系列最終爲測試/演示目的創建模擬銷售的屏幕。當用戶從下拉框中選擇場地時，我想渲染另一個包含該場地交易的下拉菜單。使用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：

更新venueSelectionChanged（）利用基於集合它創建了一個小窗口的DropdownView 。我可以在代碼中看到正確創建了HTML，但它不呈現。當我在MockSaleView的render（）函數中測試View並且能夠在this.el中傳遞MockSaleView時，它將正確渲染。對不起，我對Backbone的發展仍然陌生。

來源

2013-11-05 remotevision

您從哪裏獲得交易集合的價值？他們是手動填充還是來自REST服務？ – eggward

jsfiddle.net或jsbin.com上的功能演示如何？代碼中可能會出現一些我們無法看到的內容。另外，爲什麼你要做'$（'＃venue-select'，this.el）.on（「change」，...）'而不是使用視圖的'events'？爲什麼'$（'＃venue-select'，this.el）'而不是更習慣的'this。$（'＃venue-select'）'？ –

@eggward通過REST服務填充收藏，並在選擇場地時（例如「3交易」或「0交易」）適當填充交易數量。換句話說，deals_collection和where（）似乎也能正常工作。我只是不能得到該下拉列表來包含任何選項。 – remotevision

由於我使用了引導選擇器插件，因此它會執行Select選項的呈現，因此需要在更新值後調用刷新。

$('#deal-select').selectpicker('refresh');

來源

2013-11-12 01:03:57 remotevision

使用Backbone.js級聯選擇元素

回答

相關問題