选择对象模式与淘汰赛

Question

有谁知道我会如何用knockoutJS完成以下模式？ 我一直在apache flex中使用这个模式，并想看看我是否可以模仿它。 我不确定如何用另一个替换observable。任何帮助/想法非常赞赏。

//模型

myViewModel = { 
items : ko.observableArray(), 
selected_item : ko.observable() 
} 

//视图

<h3 data-bind="text : myViewModel.selected_item.name"> </h3> 
<ul> 
<!-- ko foreach: myViewModel.items --> 
<li data-bind="text : name"/> 
<!-- /ko --> 
</ul> 

//逻辑

$('li').click(function(e){ 
    //check ko.dataFor(this) has different id from that of myViewModel.selected_item 
    //if id different 
    //set myViewModel.selected_item to ko.dataFor(this) 
    //rejoice as h3 text changes 
}) 

Answer 1

你是在正确的轨道上。有几种模式可用于选择所选项目。如果你想不加区分地附加一个点击处理程序，就像你上面那样，那么你最好的办法就是使用一个委托处理程序，这样你就可以设置处理对你的observableArray的更改。委托处理程序将能够处理添加的新元素。

所以，你可以这样做：

$("#content").on("click", "li", function(e) { 
    var item = ko.dataFor(this), 
     current = myViewModel.selected_item; 

    if (!current() || item.id !== current().id) { 
     current(item); 
    } 
}); 

这里有一个例子：http://jsfiddle.net/rniemeyer/hBUBN/

当您绑定到h3，因为selected_item可以为空，你将需要通过包装来保护自己在一个with块（在这个例子中），调用一个处理null的函数，或者在像（data-bind="text: myViewModel.selected_item() ? myViewModel.selected_item().id : 'unknown'"）这样的绑定中进行。为了保持它的干净，这个逻辑可以放在一个函数中，你可以从你的数据绑定中调用函数，或者使用with来防止这个问题（尽管当它为空时它什么也不渲染）。

否则，你甚至可以只是这样做：

<!-- ko foreach: myViewModel.items --> 
    <li data-bind="text : name, click: $parent.selected_item"></li> 
<!-- /ko --> 

的click（和event）在KO 2.0结合传递当前数据作为第一个参数。您可以使用$parent变量访问一个范围级别（或$root以达到基本级别）。可观察对象是函数，您可以通过将新值作为第一个参数来设置它们的值。因此，在这里做$parent.selected_item将调用传递数据的observable函数作为第一个参数。因此，它会将您选择的值设置为适当的项目。

样品：http://jsfiddle.net/rniemeyer/gemug/