javascript - Knockout.js - 在可观察范围内可观察

Question

搜索了整个 stackoverflow 和其他来源 - 似乎找不到任何帮助。

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

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

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

问题是我们需要动态更改数据绑定(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 observable 并相应地自动刷新网格:

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

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