Question

我在使用html / js / knockout的页面中工作。此页面包含一个从服务中填充的表。此页面还包含选择控件等过滤器，用户可以在此控件上选择项目，并查看包含数据的新更新表格。与服务器的连接和绘制表是很好的工作。我的问题是如何使用过滤器处理我的表的负载，因为我首先使用所有默认参数调用我的服务。我的代码是这样的：

export var selectedType= ko.observable();

export function activate() {    
  loadInitData();
}

function loadInitData() {
   datacontext.getTypes(TypesObservable);
  datacontext.getRegistration(registrationsObservable, 'allTypes'); //just making simple
}

selectedType.subscribe(function (newValue) {    
   //calling to my service.
    datacontext.getRegistration(registrationsObservable, newValue.name);
   //My issue: this section is called also when my registrationsObservable are populated the first time.
 });

此代码的问题是该表已多次填充。（实际上，我的页面中还有3个过滤器）。这个链接显示了我所描述的类似内容： http://jsfiddle.net/rolandomartinezg/U66n9/2/

谢谢！

Answer 1

如果添加了optionsCaption，则selectedFruit将保持为空，直到进行选择。

http://jsfiddle.net/danne567/U66n9/5/

<select data-bind="options: items, optionsText: 'name', optionsCaption: 'Select fruit', value: selectedFruit"></select>

<span data-bind="text: selectedFruit() ? selectedFruit().name : ''"></span>

Answer 2

你可以像这样使用computed field：

vm.registrationsFiltered = ko.computed(function() {
         //return
    if(vm.selectedFruit && vm.selectedFruit() && vm.selectedFruit().name){
     return  $.grep(vm.registrations(),
                           function(item,idx){
                               return item.name === vm.selectedFruit().name
                           });


    }
    }, this);

然后更改视图以使用新的过滤属性。我把它添加到你的小提琴中： http://jsfiddle.net/U66n9/9/

从服务器过滤数据（使用淘汰赛）

2 个答案: