javascript - Knockout 绑定(bind)，JSON 数据的可重用代码

Question

我无法弄清楚如何继续进行以下数据绑定(bind)。我有 JSON 数据要以垂直网格的形式显示。因此，我正在获取一个数组(比如 columnName)中的所有键值并用于显示列名。现在我尝试使用数组(列名)显示 JSON 数据的值。

请检查代码，并告诉我解决方案。

---

JavaScript 代码:

 var _data = new Array({ firstname: 'Name1', lastname: 'LastName1' }, { firstname: 'Name2', lastname: 'Lastname2' });
var getColumnNames = new Array();
for (key in _data[0]) {
    getColumnNames.push(key);
}

// Here's my data model
var ViewModel = function () {
    this.coulmnNames = ko.observableArray(getColumnNames);
    this.keyValue = ko.observableArray(_data);
};

ko.applyBindings(new ViewModel()); // This makes Knockout get to work

---

实际代码如下:

 <div data-bind="foreach: coulmnNames" style="display: inline-block;">
    <div data-bind="text: $data"></div>
</div>

<div data-bind="foreach: keyValue" style="display: inline-block;">
    <div style="display: inline-block;">
        <div data-bind="text: firstname"></div>
        <div data-bind="text: lastname"></div>
    </div>
</div>

---

想要这样编码:

 <div data-bind="foreach: coulmnNames" style="display: inline-block;">
    <div data-bind="text: $data"></div>
</div>

<div data-bind="foreach: keyValue" style="display: inline-block;">
    <div style="display: inline-block;">
        <div data-bind="foreach: $parent.coulmnNames">
            <div data-bind="text: ???????"></div>
        </div>
    </div>
</div>

我只是想写一个可重复使用的代码，只需要改变 JSON 数据。提前致谢。

Answer 1

你快到了:

• 您需要使用$parent在内循环中引用来自外循环的“当前数据”
• 您可以使用索引器语法通过编写 $parent[$data] 来动态访问内部循环中的属性，其中 $data 是实际的列名<

所以你的绑定(bind)应该是这样的:

<div data-bind="foreach: keyValue" style="display: inline-block;">
    <div style="display: inline-block;">
        <div data-bind="foreach: $parent.coulmnNames">
            <div data-bind="text: $parent[$data]"></div>
        </div>
    </div>
</div>

演示 JSFiddle .

您可以阅读有关$parent 和$data 的更多信息binding context properties in the documentation.