KnockoutJS Foreach包含选项绑定而不更新ViewModel

时间:2012-09-04 07:09:08

标签: jquery data-binding foreach knockout.js

我正在尝试在KO中的options绑定中使用嵌套的optionsText,(optionsValuevalue)和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);

小提琴是here

1 个答案:

答案 0 :(得分:2)

value绑定中删除引号:

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

这是工作小提琴: link