如何使用敲除映射？

Question

我已将绑定应用到以下视图模型

var groupDeleteViewModel = {
        group: { Id: ko.observable(), Name: ko.observable(), Members: ko.observableArray() },
        load: function (item) {
            debugger

        },
        remove: function (item) {
            groupDeleteViewModel.group.Id(item.Id());
            groupDeleteViewModel.group.Name(item.Name());
            groupDeleteViewModel.group.Members(item.Members());
            $("#groupDelete").show();
        },
        cancel: function () {
            $("#groupDelete").hide();
        }
    }

remove 函数将视图与已在 item 中传递给 remove 函数的数据一起加载。

<div id="groupDelete" class="pop-window filter-view">
    <h2>
        Delete Group
    </h2>
    <table>
        <tr>
            <th>
                Name
            </th>
            <td>
                <span data-bind="text:group.Name" />
            </td>
        </tr>
        <!--ko foreach: group.Members-->
        <tr>
            <th>
            </th>
            <td>
                <div data-bind="text:Name" class="grey-border">
                </div>
            </td>
            <td>
            </td>
        </tr>
        <!--/ko-->
    </table>
    <span class="centeralign">
        <input type="button" value="Delete" data-bind="click: remove" class="delete" />
        <input type="button" value="Cancel" data-bind="click: cancel" />
    </span>
</div>

我不想继续将 item 的每个元素映射到 groupDeleteViewmodel.group 的每个元素。我已经在代码中的许多其他地方完成了它，这使代码变得非常混乱。我想使用 ko.mapping 插件来做同样的事情。

到目前为止，我尝试的是 -

remove:function (item){
            var data = ko.mapping.toJS(item);
            ko.mapping.fromJS(data, groupDeleteViewModel.group);
            $("#groupDelete").show();
}

但这只是行不通。我真的不知道为什么。它应该工作得很好。 有人能说出在这种情况下使用 ko.mapping 的正确方法是什么吗？

谢谢。

Answer 1

映射插件正在寻找已经存在于groupDeleteViewModel.group 中的映射数据，但没有找到，因为您没有使用映射插件初始化groupDeleteViewModel.group。 所以不要像你那样初始化组：

group: { Id: ko.observable(), Name: ko.observable(), Members: ko.observableArray() }

使用映射插件初始化它：

group: ko.mapping.fromJS({ Id: undefined, Name: undefined, Members: [] })

这是我在摆弄你的代码：fiddle