0

KnockoutJs 2.2 を使用しています。0 対多のカテゴリ関連付けを持つことができるレコードがあります。ただし、KnockoutJs は実際にはレコードのカテゴリ配列内の項目に値をバインドしていないことがわかりました。

カテゴリの配列は {id, name} オブジェクトです。これは、ルックアップ リストから派生します。

self.categories = ko.observableArray([{id:1,name:'Test1'},{id:2,name:'Test2'}]);

私のビュー モデルには、レコード オブジェクトがあります。このオブジェクトのフィールドの 1 つがカテゴリ (observableArray) です。

categories: ko.observableArray([])

レコード オブジェクトは、バインディングで簡潔にするためにビューモデルで "r" と呼ばれます。

<div class="yui3-u-4-5">
    <!-- ko foreach: r.categories-->
    <select data-bind="options: $parent.categories, optionsCaption:'-', 
optionsValue:'id', optionsText:'name', value:$data" />
    <div class="del" data-bind="click: $parent.removeCat" />
    <br />
    <!-- /ko -->
    <button data-bind="click: addCat">Add category</button>
</div>

ユーザーがカテゴリを追加または削除すると、次のコードが呼び出されます。

self.removeCat = function (data) {
    self.r.categories.remove(data);
};

self.addCat = function () {
    self.r.categories.push(ko.observable(null));
}

基本的に、カテゴリが self.r.categories 配列に追加され、ドロップダウンからカテゴリを選択すると、選択された項目の値は配列 ($data) 内のオブザーバブルにバインドされません。配列値は null のままです。

ここで問題を再現しました: http://jsfiddle.net/fxXsq/

多分私はこれを別の方法で行うべきですか？

助けてくれてありがとうクリス

4

1 に答える 1

1

このように、実際の新しい空のオブザーバブルをオブザーバブル配列に追加するべきではありません。 

self.addCat = function () {
    self.r.categories.push(ko.observable(null)); 
}

さらに、オブジェクトの Id プロパティと Name プロパティを監視できるようにする場合は、それらのモデルが必要になります。

self.addCat = function () {
    self.r.categories.push(new Category(null, self));
};

function Category(data, parent) {
   var self = this; 
   self.Id = ko.observable(-1);
   self.Name = ko.observable('');

   self.load = function(data) {
       if (data) {
           self.Id(data.Id);
           self.Name(data.Name);
       }
   }
   self.load(data);
}

これは、遅延バインディングと柔軟性をより適切にサポートするために、すべてのモデルに適用する一般的なテンプレートです。

これで、観察可能なプロパティを持つオブジェクトをobservableArray r含む が作成されます。Category

于 2012-12-19T17:07:06.967 に答える