带挖空的选定对象图案

Question

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

//模型

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 防止出现问题（尽管当它为空时它不会呈现任何内容） 。

否则，您甚至可以这样做：

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

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

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