1

我正在努力向我的 Knockout Mapping 对象添加操作。

这就是我现在所处的位置 - 我正在尝试遵循Knockout: Mapping API information。

这是 HTML 首先：

<a href="#" id="AddContact" class="add-button" type="button" data-bind="click: addContact">+ Add Contact</a>

<div id="ContactList">
    <table>
        <thead>
            <tr>
                <th>ID</th><th>Name</th><th></th>
            </tr>
        </thead>
        <tbody data-bind="foreach: $root">
            <tr>
                <td data-bind="text: ContactID"></td>
                <td data-bind="text: DisplayName"></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</div>

这是我第一次尝试连接 Knockout：

var baseModel = {
    addContact: function() {
        alert('Woo!');
    }
};

contacts = ko.mapping.fromJS('[{"ContactID":6,"DisplayName":"Doe, John"},{"ContactID":7,"DisplayName":"Rogers, Mister"}]', { }, baseModel);
ko.applyBindings(contacts);

现在，如果我从 中删除附加参数（{} 和baseModel）ko.mapping.fromJS，我的所有数据都会正确显示在表中。但是（正如所料），我收到“添加联系人”链接的绑定错误。如果我baseModel重新添加，单击“添加联系人”链接有效，但没有数据显示。我没有得到任何错误，所以我对那里发生的事情有点困惑。

我是 KO 的新手，所以我觉得我错过了一些非常简单的东西。我已经搜索过 StackOverflow，但是，此时，我只是插入代码以查看有效的方法，而不是真正了解这里发生了什么。有人可以提供一些额外的解释并指出我正确的方向吗？谢谢。

4

1 回答 1

0

您正在使用ko.mapping.fromJS但您正在传递一个字符串，而不是一个对象/数组。使用fromJSON或传入一个真实的数组。

此外，您应该在 baseModel 上应用Bindings，并且联系人应该是 VM 的一个字段。然后你可以使用foreach: contacts而不是你的奇怪的foreach: $root.

请参阅这些更改：http: //jsfiddle.net/antishok/kR4jc/3/

编辑- 使用您的代码更新您的答案，以便问题可以独立存在。

JavaScript

var baseModel = {
    addContact: function() {
        alert('Woo!');
    }
};

baseModel.contacts = ko.mapping.fromJSON('[{"ContactID":6,"DisplayName":"Doe, John"},{"ContactID":7,"DisplayName":"Rogers, Mister"}]');

ko.applyBindings(baseModel);​

HTML

<a href="#" id="AddContact" class="add-button" type="button" data-bind="click: addContact">+ Add Contact</a>

<div id="ContactList">
    <table>
        <thead>
            <tr>
                <th>ID</th><th>Name</th><th></th>
            </tr>
        </thead>
        <tbody data-bind="foreach: contacts">
            <tr>
                <td data-bind="text: ContactID"></td>
                <td data-bind="text: DisplayName"></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</div>​
于 2012-11-04T01:48:54.527 回答