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

问题描述

是否可以只用knockout js创建递归模板?

我有一个淘汰对象:

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

children 是一个 FormElementNode 数组.

我想在层次结构列表节点中递归地绘制它和它的子节点:

<li>父文本值:孩子们:<ul><li>Child1 文本值</li><li>Child2 文本值</li>

谢谢！

解决方案

是 KnockOut 支持递归模板，因此您可以在模板内引用和渲染相同的模板.

您的案例中的示例 html 如下所示:

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

演示 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屋！