javascript - Knockout.js - 可观察中的可观察

Question

搜索了 stackoverflow 和其他来源 - 似乎找不到任何有帮助的内容。

我有一个类似统计表格的 UI，其中包含数据驱动的内容。数据是在后端序列化的巨大数组/对象。

然后，我提取该数组中的值 - 这些值被设置为可观察值 - 并使用数据绑定(bind)属性将它们输出到页面上。

该表格显示给定类别中表现最佳的艺术家以及下面两位相关的艺术家。

问题是我们需要动态更改 data-bind 属性，以便它能够查看数据中的变量属性。

例如，如果用户按“艺术家”进行过滤，我们希望显示艺术家的姓名(即

<span data-bind="text: ArtistName()"></span>

但是

如果用户按“流派”进行过滤，我们希望 HTML 的同一部分能够显示轨道长度(或任何其他任意可观察属性)(即)

最终，我想要一个可变的数据绑定(bind)属性，例如

我知道我可以使用潜在的巨大 if 语句来实现这一点，如下所示:

<!-- ko if: $parent.SortMethod() == 'Topic1' -->
<span data-bind="text: Topic1()"></span>
<!-- /ko -->
<!-- ko if: $parent.SortMethod() == 'Topic2' -->
<span data-bind="text: Topic2()"></span>
<!-- /ko -->
<!-- ko if: $parent.SortMethod() == 'Topic3' -->
<span data-bind="text: Topic3()"></span>
<!-- /ko -->

...等等

肯定有更有效的方法......？

Answer 1

您必须将网格数据绑定(bind)到一个函数，然后该函数将返回按所需字段排序/过滤的数据。此外，您还必须将该下拉列表绑定(bind)到 View 模型中的可观察对象。

function GridModel(data)
{
      var self = this;
      self.RawData = data;
      self.SortedBy = ko.observable();

      self.GetGridData = function()
      {
           var ret = self.RawData();
           var sortingFld = self.SortedBy();

           if (sortingFld)
           {
               ret = ret.sort(function (a, b) {
                   a = ko.unwrap(a[sortingFld]);
                   b = ko.unwrap(b[sortingFld]);

                   return (a == b ? 0 : a < b ? -1 : 1) * 1;
                   });
           }

           return ret;
      }
}

HTML:

<table class="grid">
    <thead>
        <th>Category</th>
        <th>Artist</th>
        <th>Track</th>
    </thead>

    <tbody data-bind="foreach: GetGridData()">
        <td data-bind="text: Category"></td>
        <td data-bind="text: Artist"></td>
        <td data-bind="text: Track"></td>
    </tbody>
</table>

下拉列表将能够更改 SortedBy 可观察值并相应地自动刷新网格:

<select data-bind="value: SortedBy, options: ['Artist', 'Track']"></select>

(上面的代码仅演示了升序排序，但您也可以轻松扩展它以进行过滤)。