Question

晚上好伙伴们。我正在尝试使用通过Ajax从服务器发送的数据动态构建引导选项卡。在每个选项卡中都有来自另一个json源的某些元素。让我们说：

Model A:
  id
  name

Model B:
 id
 name
 fk_a

我的可观察数组从A获取所有对象，从B获取所有对象，我想要实现的是从模型A foreach的当前元素中过滤B的元素：

<div class="tab-content" data-bind="foreach: arrayA">
    <div class="tab-pane" data-bind="attr: { id: 'div_grupo_' + $data.id }">
         <!-- A foreach here of modelB filtered by modelA value -->
    </div>
</div>

到目前为止，我已经发现过滤一个可观察数组，但我找不到将参数传递给过滤数组的函数的方法。我可以设置一个

这里是ViewModel

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用法保持一致。

如果选择事件将影响要过滤的组，您可以使用observable + computed组合，其中计算执行过滤。
如果数据是静态的并且只需要在渲染时进行过滤，则可以将“当前”组传递给执行过滤的函数。

所提供的示例链接中详述了两种方案。

替代解决方案：Alias (Note 3)您的数据并使用if binding执行过滤。

Example:

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

Knockout.js嵌套的Observable Arrays按foreach中的值过滤

1 个答案: