2017-09-29 8 views
0

私はKnockout.JSに新たなんだと私は、このシナリオを持っているの値による結合:私は何Knockout.JS

var viewModel = { 
    people : ko.observableArray([ 
     {id = 1, name = 'John'}, 
     {id = 2, name = 'Alice'}, 
     {id = 3, name = 'Tommy'} 
    ]) 
} 

私はこのような私のViewModel内のオブジェクトの配列を、持っていますしようとするのは、foreachなどで列挙するのではなく、 "id"で配列の要素にバインドすることです。私は次のようなことをしたい:

<span data-bind="text: people()[id=2].name"></span> 

またはそれに類するものをしたい。言い換えれば、私は "キー"(この場合はid)を知っている特定のアイテムを取得したいと思います。これは可能ですか?

答えて

1

データバインドで特定の人物を取得する理由はわかりませんが、IDをパレメーターとして使用して表示したい人物を返すロジックが必要です。特定の人にバインドして、完全な配列をリストする例を作った。

JSFiddle runnable example

function peopleModel(){ 
var self = this; 

self.people = ko.observableArray([ 
    {id: 1, name: 'John'}, 
    {id: 2, name: 'Alice'}, 
    {id: 3, name: 'Tommy'} 
]); 

self.personById = function(id){ 
    return self.people().find(function(p){ 
    return p.id === id; 
    }); 
}; 
}; 

ko.applyBindings(new peopleModel()); 

<span data-bind="text: personById(2).name"></span> 

<table> 
<tbody data-bind="foreach: people"> 
    <tr> 
    <td data-bind="text: id"></td> 
    <td data-bind="text: name"></td> 
    </tr> 
</tbody> 
</table> 
1

はい、それは可能です。

viewModel.people.byId = ko.computed(function(){ 
    return viewModel.people().reduce(function(acc, obj){ 
    acc[obj.id] = obj; 
    return acc; 
    }, {}); 
}); 

..andとしてマークアップで特定の人物を参照してください:たとえば、あなたの配列はIDによってインデックス付け持つようにcomputedを作成することができます

<span data-bind="text: people.byId()['person_id'].name"></span> 

computedのViewModelにかのいずれかに結合することができます観測可能な配列そのもの(私は第2の選択肢を好む)。

Fiddle

1

あなたがキーで見つけることの項目を反復処理しなければならないので、キーによって列挙されません提示したモデル。

あなたは、配列の変化に反復する2と同様の方法のいずれかを採用することができる、ということは常に行うにはしたくない場合は、次の

  • 使用は
  • 使用observableArray.subscribe
をko.computed

計算結果は次のようなものでなければなりません:

viewModel.peope_by_id = ko.computed(function() { 
    var result = {}; 
    ko.utils.arrayFilter(viewModel.people, function(item){ 
     result[item.id] = item; 
    }); 
    return result; 
}); 

をし、事前にあるサブスクライブそれは非KOモデルのスロットを更新していますことを除いて、TTY似た:

viewModel.peope.subscribe(function() { 
    viewModel.peope_by_id = {}; 
    ko.utils.arrayFilter(viewModel.people, function(item){ 
     viewModel.peope_by_id[item.id] = item; 
    }); 
}); 

これは、あなたがデータに道に多くの人々を持っていない限り、あなたはおそらく、それを気づかないだろう大したおよび性能面ではありません。まったく反復したくない場合は、データモデルまたはユースケースを変更する必要があります。アイテムのアドレスにidの代わりに$indexを使用するといいでしょう。