1

ビュー モデル:

function Specialization(id, name) {
            var self = this;
            self.id = id;
            self.name = name;
        }

        function ObservableSpecialization() {
            var self = this;
            self.availableItem = ko.observable();
        }

        function ViewModel() {
            var self = this;
            self.specializations = ko.observableArray([]);
            self.availableSpecializations = [];

            self.addSpecialization = function () {
                self.specializations.push(new Specialization());
            }
            self.removeSpecialization = function (specialization) {
                self.specializations.remove(specialization)
            }
        }

ドキュメントの読み込み:

$(document).ready(function () {
            var model = new ViewModel();

            var temp = [];
            $.each(window.availableSpecializations, function (i, item) {
                var specialization = new Specialization(item.ID, item.Name);
                model.availableSpecializations.push(specialization);
                temp.push(item.ID);
            });
            $.each(window.userSpecializations, function (i, item) {

                var idx = temp.indexOf(item.ID);
                if (idx != -1) {
                    var available = model.availableSpecializations[idx];
                    var specialization = new ObservableSpecialization();
                    specialization.availableItem = available;
                    model.specializations.push(specialization);
                }
            });

            ko.applyBindings(model);
        });

<select>スニペット:

<tbody data-bind="foreach: specializations">
                        <tr>
                            <td>
                                <select name="Specializations" data-bind="options: $root.availableSpecializations, value: 'availableItem', optionsText: 'name'">
                                </select>
                            </td>

結果：

以下に示すように、すべての値は常にリストの最初の項目に設定されています.ID が選択した項目に何らかの形でバインドされていないと思います...どこが間違っているのでしょうか?

ここに画像の説明を入力

4

1 に答える 1

2

2 つの問題があります。1 つ目specialization.availableItemは、オブザーバブルであるため、関数呼び出しで割り当てる必要があります。specialization.availableItem(available)

value: 'availableItem'次に、 select 値を文字列 'availableItem' に設定するだけのバインド文字列です。引用符なしである必要があります：value: availableItem

ここに 2 つの修正のフィドルがあります: jsfiddle

于 2012-06-30T03:40:29.963 に答える