2

アイテムの1つのプロパティの値を使用して、監視可能な配列の値を検索しようとしています。次にいくつかのサンプルコードを示します。

HTML：

<ul data-bind="foreach: items">
  <li data-bind="text:name"></li>
  <li>Cousin: <span data-bind="text:related_id"></span></li>
</ul>​

JS：

var item = function (data){
  this.id = ko.observable(data.id);
  this.name = ko.observable(data.name);
  this.related_id = ko.observable(data.related_id);
}

var related_item = function(data){
  this.id = ko.observable(data.id);
  this.name = ko.observable(data.name);
}

var ViewModel = function(){
    this.items = ko.observableArray([
      new item({id:1,name:'thing1',related_id:1}),
      new item({id:2,name:'thing2',related_id:2})                
    ]);

this.related_items = ko.observableArray([
    new related_item({id:1,name:'cousin it'}),
    new related_item({id:2,name:'cousin fred'})
]);
}
ko.applyBindings(new ViewModel);

上記のコードをいじる：fiddle

私の質問：related_itemのnameプロパティを取得して、アイテムのrelated_idが現在表示されている場所を表示するための最良の方法は何ですか？</ p>

4

1 に答える 1

2

ここにこのJSFiddleのようなもの：フィドル

私がしたことは、アイテムとrelated_itemの「オブジェクト」をViewModelに入れて、それらを参照できるようにすることでした。2つの可能な解決策があります：

  1. idだけでなく、related_item自体をitemオブジェクトに渡します。
  2. related_items配列を反復処理します。

JS：

    self.item = function (data){
        var itm = this;
        itm.id = ko.observable(data.id);
        itm.name = ko.observable(data.name);
        itm.related_id = ko.observable(data.related_id);
        //Possible solution 1
        itm.related_item = ko.observable(data.related_item); 
        //Possible solution 2
        itm.related_item_name = ko.computed(function() {
            tmp = '';
            $.each(self.related_items(), function(idx, elem) {
                if (elem.id() === itm.related_id()) {
                    tmp = elem.name();
                    return false; //break out of the $.each loop
                }
            });
            return tmp;
        });
    };

HTML：

<ul data-bind="foreach: items">
<li data-bind="text:name"></li>
   <li>Cousin: <span data-bind="text:related_id"></span></li>
   <li>(soln 1) Cousin: <span data-bind="text:related_item().name()"></span></li>
   <li>(soln 2) Cousin: <span data-bind="text:related_item_name"></span></li>
</ul>​

他に制約がない場合は、最初のメソッドを実行して、IDの代わりにオブジェクト全体を渡します。

于 2012-10-30T03:20:38.487 に答える