2

ノックアウトを利用して編集可能なテーブルを作成しようとしています。見出しとテーブル データの両方のコレクションを持つ JSON オブジェクトがあります。このテーブルは、任意のオブジェクトを使用して構築する必要があります。JSON オブジェクトをループして ko.observableArray を作成し、ko.observables を作成してデータを取り込みます。私はそれをすることができました。私の問題は、ko.observables がデータ バインドされていないことです。

これが私のJavaScriptのスニペットです：

EditableTableVM.prototype.load = function() {
    this.headings = this.buildKO_ObservableArray(new Heading(), this.dataRepo.HEADINGS);
    this.listings = this.buildKO_ObservableArray(new Listing(), this.dataRepo.LISTINGS);
}

/*
 * Dynamically creates a ko.observableArray from a JS array
 * Params: JSClass - new instance of a class
 * Params: baseArray - array of objects to create the observable array
 * Returns: Observable arary of JS object with ko.observables
 */
EditableTableVM.prototype.buildKO_ObservableArray = function(JSClass, baseArray) {
    var newArray = ko.observableArray([]);

    for(var i = 0, j = baseArray.length; i < j; i++) {
        var baseObj = baseArray[i];

        //new class is the class with ko.observables properties
        var newClass = this.buildKO_Observable(JSClass, baseObj);
        newArray.push(newClass);
    }

    return newArray;
}

/*
 * Dynamically create ko.observable from properties in an object
 * Params: JSClass - new instance of a class
 * Params: jsObject - object to created observables with
 * Returns: JS object with ko.observables
 */
EditableTableVM.prototype.buildKO_Observable = function(JSClass, jsObj) {
    for (var key in jsObj) {
        if (jsObj.hasOwnProperty(key)) {
            JSClass[key] = ko.observable(jsObj[key]);
        }
    }

    return JSClass;
}

ここに私の Fiddle http://jsfiddle.net/breck421/YFNLX/があり、以前に説明したポイントまで動作しています。

私がやろうとしていることが可能かどうかはわかりませんが、これについて別の目を向けていただければ幸いです。

ありがとう、

ヨルダン

4

3 に答える 3

1

http://coderenaissance.github.io/knockout.viewmodel/のようなものを使用したいようです 

EditableTableVM.prototype.load = function () {
    this.headings = ko.viewmodel.fromModel(this.dataRepo.HEADINGS);
    this.listings = ko.viewmodel.fromModel(this.dataRepo.LISTINGS);
}

http://jsfiddle.net/mbest/YFNLX/3/

于 2013-06-14T02:47:05.630 に答える
1

あなたが直面している問題は、JSON をノックアウト対応のビュー モデルにマッピングしているときに、配列を持つ子を正しく処理していないことです。マッピングが十分に深くなっていません。

以下を確認すると：

EditableTableVM.listings()[0].LISTING()[0];

そのオブジェクトのプロパティは単なる値であり、ko.observables ではないことがわかります。

このマッピングを最初から作成しようとするよりも、ノックアウト マッピング プラグインのいずれかを使用することをお勧めします。 /knockoutjs.com/documentation/plugins-mapping.html またはこちらの新しい Knockout ViewModel プラグイン: http://coderenaissance.github.io/knockout.viewmodel/

ノックアウト マッピング プラグインを使用してフィドルを更新しました: http://jsfiddle.net/rrahlf/YFNLX/2/で、値が正しくバインドされるようになりました。

幸運を！

于 2013-06-14T01:54:02.267 に答える