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：

コレクションに基づいてウィジェットを作成する DropdownView を利用するように、venueSelectionChanged() を更新しました。HTML が正しく作成されているコードを確認できますが、レンダリングされません。MockSaleView の render() 関数でビューをテストし、MockSaleView に this.el を渡すことができたとき、正しくレンダリングされました。申し訳ありませんが、私は Backbone の開発にまだ慣れていません。

4

1 に答える 1

0

ブートストラップ セレクター プラグインを使用しているため、Select オプションのレンダリングが行われるため、値を更新した後に更新を呼び出す必要があります。

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