选择的对象模式与淘汰赛

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可以为null,你需要通过将它包装在一个with块(在示例中),调用一个处理null的函数,或者像绑定这样的(data-bind="text: myViewModel.selected_item() ? myViewModel.selected_item().id : 'unknown'")来保护自己.为了保持干净,可以将这个逻辑放在一个函数中,你可以从数据绑定中调用函数或使用它来with防止这是一个问题(虽然它在null时没有呈现).

否则,您甚至可以这样做:

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

KO 2.0中的click(和event)绑定将当前数据作为第一个参数传递.您可以使用该$parent变量来访问一个范围级别(或$root进入基本级别).Observable是函数,您可以通过将新值作为第一个参数传递来设置它们的值.因此,在$parent.selected_item这里执行将调用observable函数将数据作为第一个参数传递.因此,它会将您选择的值设置为正确的项目.

示例:http://jsfiddle.net/rniemeyer/gemug/