Question

我在创建命名行的方法时遇到了麻烦。行号存储在数据库中，我基本上希望它像行＃是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>

但无法弄清楚如何创建一个模型来使这项工作。

Answer 1

我建议你使用好的$index()来解决问题。您应该将数组rowTitles添加到viewmodel以及getTitleForRow方法。

e.g。

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数组，则应将其设为可观察数组，并使用服务器中的数据填充该数组。

Answer 2

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

您似乎在您的域模型中遗漏了某些内容，例如＆＃34; Group＆＃34; （其中＆＃34;联系信息＆＃34;以及＆＃34;开放时间＆＃34;是这样的组）。这将允许您编写这种KO视图：

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

此分组最好在您的数据库中可见。标准化设计应该包括类似＆＃34; Group＆＃34;。

如果这可能不是出于某种原因，那么你应该最好有这个＆＃34; Group＆＃34;概念服务器端，并将数据发送到已经分组的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]));
        }
    }
}

为行敲除创建标题

2 个答案: