Knockout.js嵌套ObservableArrays在foreach按值過濾

Question

晚上好。我試圖通過使用Ajax從服務器發送的數據動態地構建引導選項卡。在每個選項卡中都有來自另一個json源的某些元素。比方說：

Model A: 
    id 
    name 

Model B: 
id 
name 
fk_a 

我觀察到的陣列需要從A的所有對象，並從B中的所有對象和我想要實現對B的內容從A型車的foreach當前元素篩選：

到目前爲止，我已經找到someways過濾可觀察到的數組，但我無法找到傳遞參數誰過濾陣列功能的方式。我可以設置一個

這裏的視圖模型

function Grupo(id, nombre){ 
      var self = this; 
      self.id = id; 
      self.nombre = nombre; 
     }; 

     function Subgrupo(id, nombre, grupo){ 
      var self = this; 
      self.id = id; 
      self.nombre = nombre; 
      self.grupo = grupo 
     } 


     function MainConsultaViewModel() { 
      var self = this; 
      self.grupos = ko.observableArray(); 
      self.subgrupos = ko.observableArray(); 

      self.filtroSubgrupos = ko.observable(); 

      this.subgruposPorGrupo = ko.computed(function() { 
       var filtro = this.filtroSubgrupos(); 
       return ko.utils.arrayFilter(this.subgrupos(), function(filtro) { 
        return subgrupo.grupo == filtro; 
       }); 
      }, this); 

      var cambiaFiltro = function(valor){ 
       self.filtroSubgrupos(valor); 
      } 

      $.getJSON('some/url', function(data){ 
       $.each(data.objects, function (i, val) { 
        self.grupos.push(new Grupo(val.id, val.nombre)); 
       }); 
       console.log(self.grupos()); 
      }); 

      $.getJSON('some/other/url'+self.tipo_consulta, function(data){ 
       $.each(data.objects, function (i, val) { 
        self.subgrupos.push(new Subgrupo(val.id, val.nombre)); 
       }); 
      }); 

     }; 

     ko.applyBindings(new MainConsultaViewModel()); 

我缺少的是什麼？是否有可能實現這一目標？

乾杯

Answer 1

ko.utils.arrayFilter解決方案：

Example與ko.util.arrayFilter用法一致。

1. 如果選擇事件將影響要過濾的組，則可以使用observable + computed組合，其中計算執行過濾。

2. 如果數據是靜態的，只需渲染時需要過濾，則可以將「當前」組傳遞給執行過濾的函數。

   在提供的示例鏈接中詳細描述的兩種情況。

替代解決方案：Alias (Note 3)您的數據，並且使用if binding進行過濾。

​​

<ul data-bind="foreach: {data: A, as: 'dataA'}"> 
    <li><span data-bind="text: dataA.id "></span></li> 
    <ul data-bind="foreach: {data: $root.B, as: 'dataB'}"> 
    <div data-bind="if: $root.equals(dataA, dataB)"> 
     <li> <span data-bind="text: dataB.other "></span></li> 
    </div> 
    </ul> 
</ul>