如何取消映射可观察数组答案

【问题标题】：How to unmap observable arrays如何取消映射可观察数组
【发布时间】：2012-06-06 11:53:42
【问题描述】：

我有一个包含多个集合的复杂视图模型。用户可以将新项目添加到集合中。我手动创建视图模型并使用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>

【问题讨论】：

标签： knockout.js knockout-mapping-plugin

【解决方案1】：

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

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

它应该可以工作。

希望这会有所帮助。

【讨论】：