0

コードは次のとおりです。 http://jsfiddle.net/W4qPT/

コンボボックス スクリプトは下部に含まれています。これを削除すると、すべて正常に動作します。

Knockout Ajax によって提供された新しいコンテンツでコンボボックスを更新することはできないようです。

HTML

    <div>
        <div class="cbp-content" id="didScreen">
            <div>
                <table width='100%'>
                    <thead>
                        <tr>
                            <th width='25%'>State</th>
                            <th width='25%'>City</th>
                            <th class='quantity' width='10%'>Quantity</th>
                            <th width='10%'></th>
                        </tr>
                    </thead>
                    <tbody data-bind="foreach: items">
                        <tr>
                            <td>
                                <select class="combobox" data-bind="options: $parent.states, optionsText: 'name', value: state, optionsCaption: 'Select State'"></select>
                            </td>
                            <td>
                                <select class="combobox" data-bind="options: cities, optionsText: 'rc_abbr', optionsValue: 'id', value: city"></select>
                            </td>
                            <td>
                                <input name="quantity" data-bind="value: quantity" />
                            </td>
                            <td>
                                <button class="btn" data-bind="click: $parent.remove"><i class="icon-remove"></i>
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <button class="btn" data-bind="click: newItem">Add Item</button>
        </div>
    </div>
</fieldset>

JavaScript (ノックアウト JS)

var Item = function () {
    var self = this;
    self.state = ko.observable();
    self.city = ko.observable();
    self.quantity = ko.observable();


    self.cities = ko.observableArray([]);
    self.state.subscribe(function (state) {
        self.city("");
        self.cities.removeAll();
        $.ajax({
            url: '/echo/json/',
            type: 'POST',
            data: {
                json: ko.toJSON([{"id":"29","rc_abbr":"ANCHORAGE"}]),
            },
            success: function (response) {
                self.cities(response);
            }
        });
    });
};

var ViewModel = function (states) {
    var self = this;
    self.states = states;
    self.items = ko.observableArray([new Item()]);

    self.newItem = function () {
        self.items.push(new Item());
    };
    self.remove = function (item) {
        self.items.remove(item);
    };
};

var usStates = [{
    name: 'ALASKA',
    abbreviation: 'AK'
}];

window.vm = new ViewModel(usStates);
ko.applyBindings(window.vm, document.getElementById('didScreen'));
$(".combobox").select2();
4

1 に答える 1

0

作成するすべての新しいコンボボックスで再度呼び出す.select2()必要があります。DOM の準備ができたときに存在するコンボボックスでのみ呼び出すようになりました。

これを変更できます：

self.newItem = function () {
    self.items.push(new Item());
};

これに：

self.newItem = function () {
    self.items.push(new Item());
    $(".combobox").not('.select2-container').select2();
};
于 2013-03-30T18:06:13.453 に答える