knockout.js - KnockoutJS - 嵌套数据，加载子项

Question

我对 knockoutjs 非常陌生 - 完成了教程，我有了一个良好的开端。我的应用程序似乎非常适合 KO。在那我需要用来自 JSON 的数据填充一个表。这些数据是嵌套的，可以嵌套在任何深度，但我的 API 只会返回两层深度的数据。

例如

我已经设法将数据加载到我的表中，可爱。我更进一步，并支持嵌套。我有一个要求，如果一个节点有孩子，它可以在节点下面注入到表中。

这方面的一个例子是......

作为节点 B 'HasChildren'，我想允许将其子节点加载到节点 B 下方的表中。在这种情况下，我将能够查询我的 API，它会返回节点 B 的子节点

我有一些大致工作的东西，但它只适用于 1 级节点。一旦到达 level2，似乎找不到我的方法（addChild）。我无法弄清楚为什么它找不到该方法，因为它在我的 ViewModel 中。

下面的帖子对解决这部分问题大有帮助。

帮助！

我已经把代码贴在这里了……（如果你在桌子上滚动到右边，你可以点击打开，看看发生了什么！）

http://jsfiddle.net/8k6pj/1/ - 原始版本（2012 年 4 月 18 日）

提前谢谢了！

劳伦斯

ps 已经进一步更新了我的代码，所以虽然我有点卡在上面，已经开始研究如何实现代码回发以便我们可以保存。

看起来回发正在工作，但是它不会回发更改的值，而是回发原始值。认为这是因为我需要使用 ObservableArray，现在正在探索它。

score 2 · Accepted Answer

我已经了解您希望发生什么，我仍然有点不清楚，但我想我会提交我所做的，以便在需要时引发更多信息。

您的问题标题提到了嵌套，但从您的代码看来，您并没有嵌套任何东西，而是在展平嵌套的父子对象。

我没有使用我不推荐的 jquery 委托，因为它破坏了模型的封装，而是更改了您的模板以使用点击绑定，并在 Crew/Component 对象上放置了一个开放函数。

<td rowspan="3">
    <a data-bind="click: open">Open</a>
    <a>Save</a>
</td>

我还注意到您的 addChild 方法要求您将数组传递给它。您的原始代码不会起作用，因为 Crew 对象本身没有 Crews 集合，所以我猜测并在其父组件上使用了 Crews 集合。

所有这些更改意味着我必须通过根视图模型和构造函数上的父组件。

仅供参考 - 单击打开时此小提琴仍然会引发错误，因为分配的对象未正确初始化。我把这个留给你来解决，因为我对域的了解不足以自己修复它。但是，添加行为可以正常工作。

更新问题后编辑

这是一个经过重构和简化的示例，应该可以帮助您入门。我删除了很多非必要的东西，以使其更清楚它是如何工作的。

希望这可以帮助。

score 0 · Accepted Answer

我建议看一下 ko.mapping 来处理您正在处理的一些数据加载。我认为这将有助于解决您遇到的一些数据问题

2 回答 2