ノックアウトオートマップオブザーバブルから空のオブジェクトを作成

Question

私はコマッピングで小さな問題を解決しようとしています。このシナリオでは、私のViewModelは基本的にオブジェクトの集合です。各オブジェクトは、この方法では、JSON呼び出しから作成されます。

var ViewModel = ko.observableArray(); 

$.getJSON(url, function(data) { 
    ViewModel.push(ko.mapping.fromJSON(data)); 
}); 

これは完璧に動作し、私は私のHTMLに魔法のすべての並べ替えを行うことができます。 質問は、たとえば、私のコレクションに何かを追加したい場合、クライアント側の「追加と編集」シナリオをサポートするとします。基本的に私は他のと同じであるオブジェクトをプッシュする必要があり

function AddNew() { 
    this.push(// WHAT HERE?); 
} 

：私のような何かをしたいと思います：

<input type="button" value="add new" data-bind="click: AddNew" /> 

をそして私のようなものであることをViewModelににAddNewの機能を希望します既に存在していますが、もちろんすべての空白のプロパティがあります...

私はリストからオブジェクトを「クローン」し、すべての観測値を空に設定する方法を考えていましたが、恐れる：/

Answer 1

クライアント側の編集/追加機能を拡張する場合は、オブジェクトをjsクラスに形式化し、これらのオブジェクトを内部的にマッピングすることをお勧めします。これにより、メインのビューモデルにメソッドを追加し、クライアントサイドで空のインスタンスを簡単に作成することができます。

マッピングプラグインの注意点は、オブジェクトを更新するための注意点です。これらのオブジェクトは、元々はプラグインによってマップされていたものと見なされます。どのようにそれを行うことができるかの簡単な例があります。

var YourObjectClass = function (config) { 
    var self = this, data; 

    // your default structure goes here 
    data = $.extend({ 
     name: "", 
     id : -1 
    }, config); 

    ko.mapping.fromJS(data, {}, self); 
}; 

var viewModel = function(initialData) { 
    var self = this; 

    ko.mapping.fromJS(initialData, { 
     items: { 
      create : function (options) { 
       return new YourObjectClass(options.data); 
      } 
     } 
    }, self); 

    this.AddNew = function() { 
     self.items.push(new YourObjectClass()); 
    } 
}; 

これが役立ちます。

Answer 2

フィールドを知っていますか、それともサーバーから取得したフィールドからコピーする必要がありますか？もしそうなら、あなたは新しいリストを始めるのが難しいと思う。あなただけのテンプレートを作成し、それをプッシュすることができます：

var myTemplate = { 
    name: ko.observable(), 
    phone: ko.observable() 
}; 

ViewModel.push(myTemplate); // add empty item 

私はこのようにそれを作成しない理由ビューモデルは、観測可能または観察可能な配列でも見たことがありませんか？

function ViewModel() { 
    self = this; 
    self.items = ko.observableArray(); 
} 

var myViewModel = new ViewModel(); 
ko.applyBindings(myViewModel); 

$.getJSON(url, function(data) { 
    myViewModel.items.push(ko.mapping.fromJSON(data)); 
});