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);

现在，如果我从baseModel删除其他参数（{}和ko.mapping.fromJS），我的所有数据都会正确显示在表格中。但是（并且可以预期），我在“添加联系人”链接中遇到绑定错误。如果我重新添加baseModel，则单击“添加联系人”链接可以正常工作，但不会显示任何数据。我没有这样或那样的错误，所以我对那里发生的事情感到有点难过。

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

Answer 1

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

此外，您应该在baseModel上应用绑定，并且联系人应该是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>

向Knockout映射对象添加操作

1 个答案: