javascript - knockout.js - 二维数组绑定(bind)问题

Question

我想使用 knockout.js 创建一个二维数组绑定(bind)

我想让它根据这个二维数组的内容生成数据，但它不起作用。

首先，这是我的 knockout 模型

self.searchResults = ko.observableArray()

//Let's populate some data so you know the structure of my array
self.searchResults = new Array("Network", "Devices")

self.searchResults["Network"] = new Array("1", "2");
self.searchResults["Devices"] = new Array("a", "b", "c");

现在，我的 html 代码中有这个:

<ul data-bind="foreach: searchResults">
     <li data-bind="text:$data"></li>
     <ul data-bind="foreach: $data">
        <li data-bind="text: $data"></li>
     </ul>
</ul>

这里是我希望的预期结果:

<ul>
    <li>Network</li>
    <ul>
       <li>1</li>
       <li>2</li>
    </ul>
    <li>Devices</li>
    <ul>
       <li>a</li>
       <li>b</li>
       <li>c</li>
    </ul>
</ul>

问题是它循环显示字母。这是要演示的 jsFiddle 示例:http://jsfiddle.net/MMrpM/1/

Answer 1

您的问题部分是因为您错误地设置了 knockout observable。在 knockout 中，您需要调用您的可观察对象来获取或设置值:

// Get
var val = self.searchResults();

// Set
self.searchResults(val);

同样，JavaScript 不允许您像现在这样创建和操作数组。您需要实际创建一个对象数组。因此，您的代码实际上应该类似于:

self.searchResults = ko.observableArray();

//Let's populate some data so you know the structure of my array
self.searchResults = [ { name: "Network", children: [] }, { name: "Devices", children: [] } ]

self.searchResults[0].children = ["1", "2"];
self.searchResults[1].children = ["a", "b", "c"];

看到它在这个 jsfiddle 中工作:http://jsfiddle.net/dkqdw/