使用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级联选择元素

回答

相关问题