Question

我无法弄清楚如何继续进行以下数据绑定。我想要以垂直网格的形式显示JSON数据。所以我在一个数组中获取所有键值（比如columnName）并使用它来显示列名。现在我尝试使用数组（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是实际的列名

所以你的绑定应该是这样的：

<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.

Knockout绑定，JSON数据的REUSEABLE代码

1 个答案: