javascript 带有淘汰赛 js 的递归模板

Recursive template with knockout js

提问by bentzy

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

是否可以仅使用淘汰赛 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.

children 是一个 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!

谢谢！

回答by nemesv

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

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

An example html in your case would look like this:

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

<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.

演示JSFiddle。

回答by Andrei

I think, I have a little better solutionwith no tree root. Please take a look:

我想，我有一个更好的解决方案，没有树根。请看一下：

http://jsfiddle.net/nonsense66/Bzekr/

http://jsfiddle.net/nonsense66/Bzekr/

Template:

模板：

<script id="treeElement" type="text/html">
    <li>
        <span data-bind="text: name"></span>
        <ul data-bind="template: { name: 'treeElement', foreach: children }">
        </ul>
     </li>
</script>    

<ul data-bind="template: { name: 'treeElement', foreach: $data.treeRoot }"></ul>

Javascript:

Javascript：

var viewModel = {
    treeRoot: ko.observableArray()
};

var TreeElement = function(name, children) {
   var self = this;
   self.children = ko.observableArray(children);
   self.name = ko.observable(name);
}

var tree = [
    new TreeElement("Russia", [
        new TreeElement("Moscow")
    ]),
    new TreeElement("United States", 
    [
        new TreeElement("New York", [ 
            new TreeElement("Harlem"),
            new TreeElement("Central Park")
        ]) 
    ])
];

viewModel.treeRoot(tree);

ko.applyBindings(viewModel);

Hope it helps!

希望能帮助到你！

回答by Bradley Trager

This post was a great help to me. I am always finding new ways to use knockout. I just wanted to add one useful modification which is doing exactly what nemesv proposed only using the ko.mapping plugin.

这篇文章对我帮助很大。我一直在寻找使用淘汰赛的新方法。我只是想添加一个有用的修改，它完全符合 nemesv 提出的仅使用 ko.mapping 插件的建议。

//Nested javascript object:
var formElementNode = {
    children: [{
        children: [],
        text: 'Child1',
        value: 'Value1'
    }, {
        children: [{
            children: [{
                children: [],
                text: 'Child2.1.1',
                value: 'Value2.1.1'
            }],
            text: 'Child2.1',
            value: 'Value2.1'
        }],
        text: 'Child2',
        value: 'Value2'
    }, {
        children: [],
        text: 'Child3',
            value: 'Value3'
    }],
    text: 'Main',
    value: 'MainValue'
};

//Use ko.mapping to generate viewModel:
var viewModel = ko.mapping.fromJS(formElementNode);
ko.applyBindings(viewModel);

As demonstrated in this jsFiddle.

如本jsFiddle 所示。

回答by MrYellow

Recursive Custom Binding

递归自定义绑定

Another solution, after reading that templates were slower I'm looking at going with recursive binding.

另一个解决方案，在阅读了模板变慢后，我正在考虑使用递归绑定。

<ul data-bind="nestMe: name"></ul>

<ul data-bind="nestMe: name"></ul>

ko.bindingHandlers.nestMe = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {

    },
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        var observable = valueAccessor() || { };
        var unwrapped = ko.unwrap(observable);

        ko.utils.setHtml(element, '<li>'+unwrapped+'<ul data-bind="foreach: children"><li data-bind="nestMe: name" /></ul></li>');

    }
};

var rootModel = function(name, children) {
    this.name = ko.observable(name);
    this.children = ko.observableArray(children);
};

var basemodel = new rootModel('test');
basemodel.children.push(new rootModel('aaa',[new rootModel('111'),new rootModel('222')]));
basemodel.children.push(new rootModel('bbb'));
basemodel.children.push(new rootModel('ccc',[new rootModel('333'),new rootModel('444')]));

ko.applyBindings(basemodel);

Having the opportunity to play with data before the recursion should come in handy.

有机会在递归之前处理数据应该会派上用场。

JSFiddle

JSFiddle