为行淘汰赛创建标题答案

【问题标题】：Create header for row knockout为行淘汰赛创建标题
【发布时间】：2014-05-07 19:19:22
【问题描述】：

我在创建命名行的方法时遇到问题。行号存储在数据库中，我基本上希望它就像行号为 1，那么标题是“联系信息”。目前我有这个，它可以工作，但会导致标记混乱，因为会有 12 行带有标题。

<!-- ko if: {{ row }} === 1 -->
    <h4>Contact Information</h4>
<!-- /ko -->
<!-- ko if: {{ row }} === 3 -->
    <h4>Opening Times</h4>
<!-- /ko -->
<!-- ko if: {{ row }} === 5 -->
    <h4>Company Details</h4>
<!-- /ko -->

我正在尝试在数据绑定中执行此操作，我已经开始这样做了

<h4 data-bind: visible: hasHeaderForRow($data, {{ row }}, text: headerTextForRow($data, {{ row }}))></h4>

但不知道如何创建一个模型来完成这项工作。

【问题讨论】：

标签： javascript jquery knockout.js knockout-2.0

【解决方案1】：

我建议您使用旧的$index() 来解决您的问题。您应该将数组 rowTitles 添加到您的视图模型以及 getTitleForRow 方法中。

例如

rowTitles: ['Contact Information', 'Opening Times', 'Company Details' ],

getTitleForRow: function (index) {
  return this.rowTitles[index];
}

在这种情况下，您的标记应如下所示：

<div data-bind="foreach: rows">
  <h4 data-bind="text: $parent.getTitleForRow($index())"></h4>
</div>

如果rowTitles 数组是从后端获取的，则应将其设为可观察数组并使用来自服务器的数据填充它。

【讨论】：

这会起作用，但不是 $index()，而是视图模型的另一个属性，因为原始问题说行号存储在数据库中。
我会说如果服务器为这样的查询返回一个数组就可以了。
Np，由于您正在尝试淘汰赛，您可能需要查看 this ko plugin 以获取 chrome 开发工具。

【解决方案2】：

您的直截了当的问题有点难以回答，我认为您可能在这里遇到了 XY 问题。这个答案提供了一个替代解决方案（这可能是也可能不是你需要的，但我想它可能会帮助其他人在任何情况下登陆这里）。

您的域模型中似乎缺少某些内容，例如“组”（其中“联系信息”和“开放时间”都是此类组）。这将允许您编写这种 KO 视图：

<!-- ko foreach: groups -->
<h4 data-bind="text: group-title"></h4>
Etc.
<!-- /ko -->

最好这个分组已经在您的数据库中可见。规范化的设计可能应该包括类似“组”的东西。

如果由于某种原因这不可能，您最好有这个“组”概念服务器端，并将数据发送到位已经分组的 Knockout。

如果这也不可能，我建议在您的视图模型中处理它，而不是在您的视图中。假设以下数据：

var data = [
    "MARY MARY",
    "Contact information",
    "Mary's Bakery, Main street",
    "Opening Times",
    "10 till 18 hrs",
    "Company details",
    "Bakes the best cookies in town."];

那么您可以使用以下视图模型：

var Group = function(txt) {
    var self = this;
    self.txt = ko.observable(txt);
}

var ViewModel = function(data) {
    var self = this;

    self.title = ko.observable(data[0]);

    self.groups = ko.observableArray([]);

    for (var i=0; i < data.length; i++) {
        if (i == 1 || i == 3 || i == 5) { // or whatever "if" logic seems best
            i++;
            self.groups.push(new Group(data[i]));
        }
    }
}

【讨论】：