0

我的应用程序中有一个向导视图，它引导用户浏览一系列简短的屏幕，最终创建一个用于测试/演示目的的模拟销售。当用户从下拉框中选择一个地点时，我想呈现另一个下拉菜单，其中包含该地点的交易。

但是，当我尝试此操作时，“交易”下拉菜单始终为空。认为这可能是一个 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：

更新了 placeSelectionChanged() 以利用 DropdownView 来创建基于集合的小部件。我可以在代码中看到正确创建了 HTML，但它没有呈现。当我在 MockSaleView 的 render() 函数中测试视图并能够将 this.el 传递给 MockSaleView 时，它会正确呈现。抱歉，我还是 Backbone 开发的新手。

4

1 回答 1

0

由于我使用的是 bootstrap-selector 插件，它会渲染 Select 选项，因此需要在更新值后调用 refresh。

$('#deal-select').selectpicker('refresh');
于 2013-11-12T01:03:57.637 回答