1

optionsネストされた、(optionsTextoptionsValue)とバインディングをKOvalueのバインディング内で使用しようとしています。foreach

次のコードが選択ボックスをViewModelの関連にバインドすることを期待してItemいましたが、ビューモデルの値を更新しているようには見えません-それらは常に「n/a」で初期化した値のままです-どうすればよいですかそれ?

私は次のようにhtmlページを設定しました:

<table>
    <tbody data-bind="foreach: Items">
        <tr>
            <td>
                <select data-bind="options: $parent.Countries, optionsText: 'Name', optionsValue: 'Code', value: 'Country'"></select>
            </td>
            <td>
                <span data-bind="text: Country"></span>                    
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">
                <a href="#" data-bind="click: AddItem">Add item</a>
            </td>
        </tr>
    </tfoot>
</table>

次のJavaScriptを使用します。

var countries = ko.observableArray([
    { Name : "United Kingdom", Code : "UK", Population : "1 Monarch" },
    { Name : "Australia", Code : "AU", Population : "22 million kangaroos" },
    { Name : "Antarctica", Code : "AQ", Population : "100,000 penguins (0 polar bears)" }
]);

var item = { Country : "n/a" };

var ViewModel = function() {
    this.Countries = countries;

    this.Items = ko.observableArray();
    this.AddItem = function() {
        this.Items.push(ko.mapping.fromJS(item));
    };
};
var vm = new ViewModel();

ko.applyBindings(vm);

フィドルはここにあります

4

1 に答える 1

2

valueバインディングから引用符を削除します:

<select data-bind="options: $parent.Countries, 
                   optionsText: 'Name', 
                   optionsValue: 'Code', 
                   value: Country"></select>

ここに作業フィドルがあります: リンク

于 2012-09-04T07:19:02.913 に答える