复杂对象传入 ko.mapping.fromJS

Question

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

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

这样做的目的是使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>

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.