带有剔除的选定对象图案

问题描述

有人知道我将如何使用敲除JS完成以下模式吗?我一直在apache flex中使用这种模式，想看看我是否可以模仿它.我不确定如何用另一个替换一个可观察的对象.任何帮助/想法都非常感激.

Does anybody know how I'd accomplish the following pattern with knockoutJS?I use this pattern all the time in apache flex and want to see if I can mimic it.I am unsure how to replace an observable with another. Any help/thoughts much appreciated.

//型号

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
 })

推荐答案

您处在正确的轨道上.您可以使用几种模式来选择选定的项目.如果您希望像上面那样毫不干扰地附加单击处理程序，那么最好的选择是使用委托处理程序，这样您就可以处理对observableArray的更改.委托处理程序将能够处理要添加的新元素.

You are on the right track. There are a few patterns that you can use to choose a selected item. If you want to attach a click handler unobtrusively, as you have above, then your best bet would be to use a delegated handler, so that you are set to handle changes to your observableArray. A delegated handler will be able to handle new elements being added.

因此，您可以执行以下操作:

So, you could do something like:

$("#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时不呈现任何内容).

When you bind to your h3, since selected_item can be null you would need to protect yourself by wrapping it in a with block (in the example), calling a function that handles null, or doing it in the binding like (data-bind="text: myViewModel.selected_item() ? myViewModel.selected_item().id : 'unknown'"). To keep it clean, this logic can be put in a function and you can call the function from your data-bind or using with prevents this from being an issue (although it renders nothing when it is null).

否则，您甚至可以执行以下操作:

Otherwise, you can even just do this:

<!-- 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将调用可观察函数，将您的数据作为第一个参数传递.因此，它将您选择的值设置为适当的项目.

The click (and event) binding in KO 2.0 pass the current data as the first argument. You can use the $parent variable to access one scope level up (or $root to get to the base level). Observables are functions and you set their value by passing the new value as the first argument. So, doing $parent.selected_item here will call the observable function passing your data as the first argument. So, it will set your selected value to the proper item.

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

这篇关于带有剔除的选定对象图案的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！