与淘汰赛js的递归模板 [英] Recursive template with knockout js

问题描述

我有一个淘汰赛对象：

 函数FormElementNode（children，text，value）{
 var self = this; 
 self.children = ko.observableArray（children）; 
 self.text = ko.observable（text）; 
 self.value = ko.observable（value）; 
} 
  

children是FormElementNode的一个数组。

$

 < ul> b $ b 
我想绘制它，并且它是递归地在层次结构列表节点中的子元素。 
< li>父文字值：
儿童：
< ul> 
< li> Child1文字值< / li> 
< li> Child2文字值< / li> 
< / li> 
  

谢谢！

解决方案

是的，KnockOut支持递归模板，因此您可以在模板中引用和呈现相同的模板。

您的案例中的示例html应该是这样的：

 < script id =formElementNodeTemplatetype =text / html> 
< ul> 
< li>父< span data-bind =text：text>< / span> 
< span data-bind =text：value>< / span> 
< br /> 
孩子：
 <！ -  ko模板：{name：'formElementNodeTemplate'，
 foreach：children}  - > 
<！ -  / ko  - > 
< / li> 
< / ul> 
< / script> 
 
< div data-bind =template：{name：'formElementNodeTemplate'，data：$ data}> 
< / div> 
  

演示 JSFiddle。

Is it possible to create a recursive template only with knockout js?

I have a knockout object:

function FormElementNode(children, text, value) {
   var self = this;
   self.children = ko.observableArray(children);
   self.text = ko.observable(text);
   self.value = ko.observable(value);
}   

children is an array of FormElementNode.

I want to draw it and it's children recursively in a hierarchy list nodes:

<ul>
   <li>Parent text value:
      Children: 
      <ul>
         <li>Child1 text value</li>
         <li>Child2 text value</li>
   </li>

Thanks!

解决方案

Yes KnockOut supports recursive templates so you can reference and render the same template inside the template.

An example html in your case would look like this:

<script id="formElementNodeTemplate" type="text/html">
<ul>
    <li>Parent <span data-bind="text: text"></span> 
               <span data-bind="text: value"></span>
        <br/>
        Children:
        <!-- ko template: { name: 'formElementNodeTemplate',  
                            foreach: children } -->
        <!-- /ko -->        
     </li>
   </ul>
</script>    

<div data-bind="template: { name: 'formElementNodeTemplate', data: $data }">
</div>

Demo JSFiddle.

这篇关于与淘汰赛js的递归模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！