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

Question

我有一个复杂的对象，我想传递给ko.mapping.fromJS，我的问题是我只希望一个字段是可观察的，但其他属性要么是 null 要么是 non -根据我尝试过的方法存在。

我创建了一个 jsFiddle here来说明我的问题。我希望简单地复制内部对象，因为我不需要它是可观察的；考虑到我将拥有的数量，我不想要额外的开销。

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

如果有人有另一种不涉及映射的方法，我很想听听。我的 View 模型有很多功能等，数据来自 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>

Answer 1

您需要使用 copy 而不是 ignore 因为您希望那里的属性不可见。

并且由于您直接映射数组，因此映射配置变得有点复杂。

您不能在“根”级别定义copy，因为您的数组位于根。因此，您必须为项目提供 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.