options
ネストされた、(optionsText
、optionsValue
)とバインディングを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);
フィドルはここにあります