传入ko.mapping.fromJS的复杂对象

Complex Object passed into ko.mapping.fromJS

本文关键字：复杂 对象 fromJS ko mapping 传入      更新时间：2023-09-26

我有一个复杂的对象，我想传递到ko.mapping.fromJS和我的问题是，我只希望一个字段是可观察的，但其他属性遇到null或不存在基于我尝试过的方法。

我在这里创建了一个jsFiddle来说明我的问题。我希望内部对象只是被复制，因为我不需要它是可观察的;考虑到这些文件的数量，我不想要额外的开销。

这样做的目的是使qty可编辑，但inner.name在文本框中保持不变。这就意味着一个是可观察的，而另一个不是。

如果有人有另一种不涉及映射的方法，我很乐意听到。我的视图模型有相当多的函数等，数据来自AJAX调用。

function viewModel() {
    var self = this;
    self.slots = ko.observableArray([]);
    self.load = function() {
        ko.mapping.fromJS(
            [
                { 'qty': 1, 'inner': { 'name': 'thing'} },
                { 'qty': 2, 'inner': { 'name': 'stuff'} }
            ],
            { 'include': ['qty'], 'ignore': ['inner.name'] },
            self.slots);
    }
};
ko.applyBindings(new viewModel());
<button data-bind="click: load">Go</button>
<ul data-bind="foreach: slots">
    <li>
        <span data-bind="text: qty"></span>&nbsp;<span data-bind="text: inner.name"></span><input data-bind="value: qty" /><input data-bind="value: inner.name" />
    </li>
</ul>

你需要使用copy而不是ignore，因为你想在那里有属性而不是可观察的。

因为你直接映射了一个数组映射配置就变得有点复杂了。

不能在"root"级别定义copy，因为数组位于根。所以你必须为项目提供一个create函数在create函数中，你现在可以为项目的属性指定copy选项:

   ko.mapping.fromJS(
        [
            { 'qty': 1, 'inner': { 'name': 'thing'} },
            { 'qty': 2, 'inner': { 'name': 'stuff'} }
        ],
        {
            create: function (options) {
                return ko.mapping.fromJS(options.data, {
                    copy: ['inner.name']
                })
            }
        },
        self.slots);

演示JSFiddle。

相关文章：