9

koマッピングの小さな問題を解決しようとしています。シナリオは、私のViewModelが基本的にオブジェクトのコレクションであるというものです。各オブジェクトは、次のようにjson呼び出しから作成されます。

var ViewModel = ko.observableArray();

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

これは完全に機能し、HTMLであらゆる種類の魔法を実行できます。問題は、たとえば、コレクションに何かを追加したい場合、たとえば、クライアント側の「追加と編集」シナリオをサポートする場合です。私は次のようなことをしたいと思います：

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

そして、ViewModelのAddNew関数を次のようにしたいと思います。

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

基本的に、既存の他のオブジェクトと同じオブジェクトをプッシュする必要がありますが、もちろん、すべてのプロパティが空白になっています...

リストからオブジェクトを「複製」し、すべてのオブザーバブルを空に設定する方法を考えていましたが、どこから始めればよいのかわかりません：/

4

2 に答える 2

7

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

マッピング プラグインに関する 1 つの注意点は、オブジェクトを更新する場合、それらのオブジェクトが最初にプラグインによってマッピングされていることを期待することです。これを行う方法の簡単な例を次に示します。

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());
    }
};

お役に立てれば。

于 2012-05-26T04:19:15.037 に答える
0

フィールドを知っていますか、それともサーバーから取得したものからコピーする必要がありますか? その場合、新しいリストを開始するのに問題があると思います。テンプレートを作成してプッシュするだけです。

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));
});
于 2012-05-26T04:28:59.947 に答える