KnockoutJS-嵌套数据，正在加载子级 [英] KnockoutJS - Nested Data, Loading Children

问题描述

我对Knockoutjs非常陌生-已经完成了教程 我有了一个不错的开始.我有看起来很合适的应用程序 到KO.在这种情况下，我需要使用JSON中的数据填充表格.这 数据是嵌套的，并且可以嵌套在任何深度，但是我的API仅 曾经返回两个深度的数据.

I am very very new to knockoutjs - having worked through the tutorials and I have made a nice start. I have application which seems well suited to KO. In that I need to populate a table with data from JSON. This data is nested, and can be nested at any depth, but my API will only ever return data two levels deep.

例如

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

    我已经设法将数据加载到表中，这很可爱.我拿了 此步骤更进一步，并支持嵌套.我有一个要求，如果一个节点有子节点，则可以将其注入到节点下方的表中.

    I've managed to get the data to load into my table, lovely. I've taken this a step further and have supported nesting. I have a requirement so that if a Node has children, it can be injected beneath the Node into the table.

    一个例子就是...

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

        作为节点B'HasChildren'，我希望允许将其子节点加载到节点B下的表中.在这种情况下，我将能够查询我的API，并且它将返回节点B的子节点

        As Node B 'HasChildren', I would like to allow the loading of it's children into the table, beneath Node B. In this event, I would be able to query my API, and it would return the children for Node B

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

                    我有一些可以正常工作的东西，但是它只能在1级上工作 节点.一旦进入2级，似乎找不到我的方法 (addChild).我无法弄清楚为什么它找不到方法 在我的ViewModel中.

                    I've got something roughly working, but it only works on a level 1 node. Once it get's to level2, can't seem to find my method (addChild). I can't work out why it cannot find the method, as it is in my ViewModel.

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

                    The post below, goes a long way to fixing this part of the problem.

                    帮助！

                    我已经在此处粘贴了代码...(如果您滚动到表格的右侧， 您可以单击打开"以查看发生了什么！)

                    I've pasted the code here... (if you scroll to the right on the table, you can click open, to see, what's happening!)

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

                    http://jsfiddle.net/8k6pj/1/ - Original Version (18th April 2012)

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

                    http://jsfiddle.net/8k6pj/6/ - Latest Version

                    非常感谢！

                    劳伦斯

                    p.s进一步更新了我的代码，因此尽管我对上面的内容有些犹豫，但已经开始研究实现代码回发以便我们可以保存的方式.

                    p.s Have further updated my code, so although I'm a bit stuck on the above, have started looking into implementing how the code will postback so we can save.

                    貌似回发有效，但是它不回发更改的值，原始值被回发.认为这是因为我需要使用一个ObservableArray，现在就进行探索.

                    It looks like the postback is working, however it does not post back the changed values, the original values are posted back. Think this is because I need to use an ObservableArray, exploring that now.

                    推荐答案

                    我一直在努力了解您想发生的事情，我仍然不清楚，但以为我会按顺序提交我所做的事情必要时激发更多信息.

                    I've had a go at understanding what you would like to happen, I'm still a bit unclear but thought I'd submit what I did in order to provoke more info if needed.

                    您的问题标题提到嵌套，但是从您的代码看来，您没有嵌套任何内容，而是将嵌套的父子对象展平.

                    Your question title mentions nesting but from your code it appears you aren't nesting anything, instead you are flattening your nested parent child objects.

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

                    Instead of using jquery delegates which I would not recommend since it breaks encapsulation of your models, I changed your template to use click bindings and placed an open function on the Crew/Component objects.

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

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

                    I also noticed that your addChild method requires you to pass an array to it. Your original code would not have worked as the Crew objects don't themselves have a Crews collection so i took a guess an used the Crews collection on their parent Component.

                    所有这些更改意味着我必须通过根viewModels和构造函数上的父组件.

                    All these alterations meant I had to pass through the root viewModels and the parent components on the constructors.

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

                    仅供参考-单击打开"时，此小提琴仍然会引发错误，因为分配的对象未正确初始化.由于我对域的了解不足以自行解决，因此我将这个问题留给您解决.不过，添加行为仍然可以正常工作.

                    FYI - This fiddle still throws errors when clicking Open as the Allocated objects don't get initialized correctly. I've left this upto you to fix since I don't understand the domain enough to fix it myself. The adding behavior works correctly though.

                    更新问题后进行编辑

                    这是一个经过重构和简化的示例，应该可以帮助您入门.我删除了许多不必要的内容，以使其工作方式更清楚.

                    Here's a re factored and simplified example that should get you started. I removed a lot of the non-essential stuff to make it clearer how it works.

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

                    希望这会有所帮助.

                    这篇关于KnockoutJS-嵌套数据，正在加载子级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！