2

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

我寻找一种从视图数据创建 JSON 以将其发送回服务器的方法。

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

当我使用ko.toJSONJSON 时，它包含 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>
4

1 回答 1

4

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

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

它应该工作。

希望这可以帮助。

于 2012-06-06T15:32:18.360 回答