带有淘汰赛 js 的递归模板 [英] Recursive template with knockout js
本文介绍了带有淘汰赛 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屋!
查看全文