2

複数のコレクションを含む複雑なビュー モデルがあります。ユーザーはコレクションに新しいアイテムを追加できます。ビューモデルを手動で作成ko.mapping.fromJSし、サーバーからのデータをバインドするために使用します。コレクションは空にすることも、すでに値を含むこともできます。

ビュー データから JSON を作成してサーバーに送り返す方法を探しています。

私が使用ko.mappingすると、初期データには存在しなかったため、追加された項目の空のオブジェクトのみが JSON に含まれます。

使用するko.toJSONと、JSON に ko_mapping プロパティが含まれます。

jsfiddleを作成しました。

1 つの解決策は ko_mapping プロパティを使用ko.toJSONして削除することですが、より良い解決策があることを願っていました。

コード：

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

マッピング解除に関するマッピング プラグインの要件は、すべてのオブジェクトがプラグインで作成されている必要があることです。アイテムを配列に追加するとき、マッピング プラグインでそれらを作成しませんでした。add メソッドをこれに変更するだけです。

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

そして、それはうまくいくはずです。

お役に立てれば。

于 2012-06-06T15:32:18.360 に答える