KnockoutJS - 嵌套数据,装载儿童

时间:2012-04-17 18:07:21

标签: knockout.js

对于knockoutjs来说,我是非常新的 - 完成了这些教程 我开了个好头。我有适合的应用程序 到KO。在那里我需要使用来自JSON的数据填充表。这个 数据是嵌套的,可以嵌套在任何深度,但我的API只会 永远返回两个级别的数据。

E.g。

  • 节点1
    • 节点A
    • 节点B

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

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

  • 节点1(HasChildren)
    • 节点A
    • 节点B(HasChildren)

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

  • 节点1
    • 节点A
    • 节点B
      • 节点B1
      • 节点B2
  

我有一些粗略的工作,但它只适用于1级   节点。一旦达到level2,似乎无法找到我的方法   (的addChild)。我无法解决为什么它找不到这种方法的原因   在我的ViewModel中。

     

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

帮助!

我在这里贴了代码......(如果你滚动到桌子右边, 你可以点击打开,查看,发生了什么!)

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

http://jsfiddle.net/8k6pj/6/ - 最新版本

非常感谢提前!

劳伦斯

p.s进一步更新了我的代码,所以虽然我对上面的内容有点困惑,但已经开始考虑实现代码如何回发以便我们可以保存。

看起来回发工作正常,但是它不会回发更改的值,原始值会被回发。想想这是因为我需要使用ObservableArray,现在就开始探索。

2 个答案:

答案 0 :(得分:2)

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

您的问题标题提到了嵌套,但是从您的代码中可以看出您没有嵌套任何内容,而是展平嵌套的父子对象。

我改为使用点击绑定并在Crew / Component对象上放置一个open函数,而不是使用我不推荐使用的jquery委托,因为它会破坏模型的封装。

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

我还注意到你的addChild方法要求你传递一个数组。您的原始代码不会起作用,因为Crew对象本身没有Crews集合,因此我猜测在其父组件上使用了Crews集合。

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

http://jsfiddle.net/madcapnmckay/fdb5r/2/

仅供参考 - 当点击“打开”时,这个小提琴仍会引发错误,因为分配的对象未正确初始化。我已经把这个留给你解决,因为我不了解域名足以自己修复它。添加行为可以正常工作。

更新问题后编辑

这是一个重新考虑和简化的示例,可以帮助您入门。我删除了很多非必要的东西,以使它更清晰。

http://jsfiddle.net/madcapnmckay/xxGam/

希望这有帮助。

答案 1 :(得分:0)

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

http://knockoutjs.com/documentation/plugins-mapping.html