Question

我有一个包含多个集合的复杂视图模型。用户可以向集合添加新项目。我手动创建视图模型并使用ko.mapping.fromJS绑定来自服务器的数据。集合可以为空或已包含值。

我搜索从视图数据创建JSON的方法，以将其发送回服务器。

当我使用ko.mapping时，JSON只包含添加项目的空对象，因为它们在初始数据中不存在。

当我使用ko.toJSON时，JSON包含ko_mapping属性。

我创建了一个jsfiddle。

一个解决方案似乎是使用ko.toJSON并删除ko_mapping属性，但我希望有更好的解决方案。

代码：

var initialData = {
   title: 'numbers:',
   numbers: []
   };

function Data() {
    var self = this;

    self.title = ko.observable();  
    self.numbers = ko.observableArray();

    self.addNumber = function() {
        self.numbers.push({
            id: ko.observable(2)
        });
    };

    self.removeNumber = function(item) {
        self.numbers.destroy(item);
    };
}

function ViewModel() {
    var self = this;
    self.masterData = [{
        id: 1,
        caption: "One"},
    {
        id: 2,
        caption: "Two"}];

    self.data = new Data();

    self.toMappedJSON = function() {
        var json = ko.mapping.toJSON(self.data);
        $('#json').text(js_beautify(json));
    };

   self.toJSON = function() {
       var json = ko.toJSON(self.data);
       $('#json').text(js_beautify(json));
   };    
}

var viewModel = new ViewModel();
ko.mapping.fromJS(initialData, {}, viewModel.data);

ko.applyBindings(viewModel);

html：

<div data-bind="with: data">
<h2 data-bind="text: title"></h2>
    <ul data-bind="foreach: numbers">
        <li>
           <select data-bind="value: id, options: $root.masterData, optionsText: 'caption', optionsValue: 'id'"></select>
            value: <span data-bind="text: id"></span>
            <button data-bind="click: $parent.removeNumber">-</button>
        </li>
    </ul>
    <button data-bind="click: addNumber">+</button>
</div>

<h2>JSON</h2>
<div>
    <button data-bind="click: toMappedJSON">ko.mapping.toJSON</button>
    <button data-bind="click: toJSON">ko.toJSON</button>    
</div>
<textarea id="json" rows="15" cols="50"></textarea>

Answer 1

映射插件在取消映射时的要求是必须使用插件创建所有对象。将项添加到数组时，您没有使用映射插件创建它们。只需将添加方法更改为此。

self.addNumber = function() {
   self.numbers.push(ko.mapping.fromJS({
      id: ko.observable(2)
   }));
};

它应该有用。

希望这有帮助。

如何取消映射可观察数组

1 个答案: