3

ユーザーがキャスティングを作成し、このキャスティング オブジェクトにカテゴリの配列を追加できるようにしようとしています。ノックアウトの foreach バインディングをカテゴリの配列に使用して、ユーザーが新しいカテゴリをキャスティングに追加できるようにしようとしていました。ここで説明しようとしていることを説明するために、jsfiddle を作成しました。
http://jsfiddle.net/msell/ueNg7/16/

ユーザーがキャストを変更すると、JSON オブジェクトが正しく構築されますが、表示するキャストのリストを取得できません。

4

2 に答える 2

10

いくつかの問題があります。

ノックアウト 1.2.1 を使用しています

foreachバインディングは Knockout 2.0 まで追加されませんでした。

を使用していませんobservableArray

空の配列ではなく、categoriesプロパティをに変更する必要があります。ko.observableArray()そうしないと、Knockout はいつアクセスしたかを監視できずpush、removeメソッドは存在しません。

あなたのthis束縛は間違っています。

イベント ハンドラーから呼び出されると、this正しく設定されません。これはさまざまな方法で修正でき、Knockout のドキュメントで詳細に説明されていますが、簡単な修正の 1 つは、参照をviewModelではなく に変更することthisです。

これらすべてを修正するには、Knockout 2.0 にアップグレードし、ビュー モデルの宣言を次のように変更する必要があります。

var viewModel = {
    name: ko.observable(''),
    description: ko.observable(''),
    categories: ko.observableArray(),
    categoryToAdd: ko.observable(''),

    removeCategory: function(category) {
        viewModel.categories.remove(category);
    },

    addCategory: function() {
        viewModel.categories.push(new Category(viewModel.categoryToAdd()));
        viewModel.categoryToAdd('');
    }
};

修正された JSFiddle は次のとおりです: http://jsfiddle.net/ueNg7/19/

于 2012-04-11T04:26:37.067 に答える
0

配列に ko.observableArray を使用する必要があります。そうしないと、Knockout は配列をいつ変更して更新しないかを認識しません。また、代わりにテンプレートを使用する必要があります。

var viewModel = {
    name: ko.observable(''),
    description: ko.observable(''),
    categories: ko.observableArray([]),
    categoryToAdd: ko.observable(''),
    removeCategory: function(category) {
        this.categories.remove(category);
    },

    addCategory: function() {

        this.categories.push(new Category(this.categoryToAdd()));
        this.categoryToAdd('');
    }
};
于 2012-04-11T04:23:18.380 に答える