淘汰赛绑定对自我的一对多关系(淘汰赛中的递归) [英] knockout binding a One-to-Many relationship on self (Recursion in knockout)

问题描述

所以在我的数据库中，我有一个与自身具有一对多关系的模型.一个很好的例子是类似 reddit 的评论系统.

我目前正在做这样的事情:

<span data-bind="text: '(' + OrderQualifier + ') ' + Text"></span><!-- ko foreach: { data: Children } --><span data-bind="text: '(' + OrderQualifier + ') ' + Text"></span><!--/ko -->

这显然只支持一个级别的孩子.当 Child (Children[i]) 可能也可能没有需要循环的 Children 数组时，是否有一种干净的方法来构造它.在我的例子中，技术上可能有这样的无限级别(它不会).

我很确定我可以想出一些技巧，但我认为可能有更好的方法.谢谢.

我想要映射的数据:

<代码>{"@odata.context":"http://localhost:3080/odata/$metadata#SectionApi(*)/$entity","SectionID":4,"文本":"文本",HTML":空，"订单限定符":"1","IsUserCreated":false,孩子们":[{"@odata.context":"http://localhost:3080/odata/$metadata#SectionApi(*)/$entity","SectionID":4,"文本":"文本",HTML":空，"订单限定符":"1","IsUserCreated":false,孩子们":[{"@odata.context":"http://localhost:3080/odata/$metadata#SectionApi(*)/$entity","SectionID":4,"文本":"文本",HTML":空，"订单限定符":"1","IsUserCreated":false,孩子们":[{"@odata.context":"http://localhost:3080/odata/$metadata#SectionApi(*)/$entity","SectionID":4,"文本":"文本",HTML":空，"订单限定符":"1","IsUserCreated":false,孩子们":[]}]}]}]}

如您所见，这包含 3 个级别的子评论，但我需要能够处理未知数量的子评论.

解决方案

knockout 模板支持递归.http://jsfiddle.net/m812qjeq/2/

<div data-bind="template: { name: 'childTemplate', data: $data }"></div>
<script type="text/html" id="childTemplate"><span data-bind="text: '(' + OrderQualifier + ') ' + Text"></span><!-- ko if: $data.Children --><!-- ko foreach: 孩子们--><div data-bind="template: { name: 'childTemplate', data: $data }"></div><!--/ko --><!--/ko -->

So in my database I have a model that has a one to many relationship with itself. A good example of this is a comments system like on reddit.

I currently am doing something like this:

<div class="body" data-bind="foreach: { data: Comments}">
    <span data-bind="text: '(' + OrderQualifier + ') ' + Text"></span>
    <!-- ko foreach: { data: Children } -->
        <span data-bind="text: '(' + OrderQualifier + ') ' + Text"></span> 
    <!-- /ko -->
</div>

which obviously only supports one level of children. Is there a clean way to structure this when a Child (Children[i]) may or may not also have a Children array that needs to be looped over. In my example there could technically be infinite levels like this (it won't be).

I'm pretty sure I could come up with something hacky but I think there may be a better way. Thanks.

Edit:

Data that I would want to map:

{  
   "@odata.context":"http://localhost:3080/odata/$metadata#SectionApi(*)/$entity",
   "SectionID":4,
   "Text":"Text",
   "Html":null,
   "OrderQualifier":"1",
   "IsUserCreated":false,
   "Children":[  
      {  
         "@odata.context":"http://localhost:3080/odata/$metadata#SectionApi(*)/$entity",
         "SectionID":4,
         "Text":"Text",
         "Html":null,
         "OrderQualifier":"1",
         "IsUserCreated":false,
         "Children":[  
            {  
               "@odata.context":"http://localhost:3080/odata/$metadata#SectionApi(*)/$entity",
               "SectionID":4,
               "Text":"Text",
               "Html":null,
               "OrderQualifier":"1",
               "IsUserCreated":false,
               "Children":[  
                  {  
                     "@odata.context":"http://localhost:3080/odata/$metadata#SectionApi(*)/$entity",
                     "SectionID":4,
                     "Text":"Text",
                     "Html":null,
                     "OrderQualifier":"1",
                     "IsUserCreated":false,
                     "Children":[  

                     ]
                  }
               ]
            }
         ]
      }
   ]
}

As you can see this contains 3 levels of child comment but I need to be able to handle an unknown number of child comments.

解决方案

knockout template supports recursion. http://jsfiddle.net/m812qjeq/2/

<div class="body" data-bind="foreach: Comments">
    <div data-bind="template: { name: 'childTemplate', data: $data }"></div>
</div>

<script type="text/html" id="childTemplate">
    <span data-bind="text: '(' + OrderQualifier + ') ' + Text"></span>
    <!-- ko if: $data.Children -->
        <!-- ko foreach: Children -->
            <div data-bind="template: { name: 'childTemplate', data: $data }"></div>
        <!-- /ko -->
    <!-- /ko -->
</script>

这篇关于淘汰赛绑定对自我的一对多关系(淘汰赛中的递归)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！