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/

选择的对象模式与淘汰赛

1 个答案: