javascript - 向挖空映射对象添加操作

Question

我正在努力向我的 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);

现在，如果我从 ko.mapping.fromJS 中删除附加参数({} 和 baseModel)，我的所有数据都会正确显示在表格中。但是(正如预期的那样)，我收到“添加联系人”链接的绑定(bind)错误。如果我重新添加 baseModel，单击“添加联系人”链接可以工作，但不会显示任何数据。我没有以某种方式得到任何错误，所以我对那里发生的事情有点困惑。

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

Answer 1

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

此外，您应该在 baseModel 上应用绑定(bind)，并且联系人应该是虚拟机的一个字段。然后你可以使用 foreach: contact 而不是你奇怪的 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>​