34

ノックアウトjsだけで再帰テンプレートを作成することは可能ですか？

ノックアウトオブジェクトがあります：

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

子はFormElementNodeの配列です。

私はそれを描きたいのですが、それは階層リストノードで再帰的に子になります：

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

ありがとう！

4

4 に答える 4

38

はいKnockOutは再帰テンプレートをサポートしているため、テンプレート内で同じテンプレートを参照およびレンダリングできます。

あなたの場合の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>

デモJSFiddle。

于 2013-03-20T14:00:09.680 に答える
25

私は、木の根がない（または複数の木の根があると思う）少し良い解決策があると思います。ご覧ください：

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

レンプレート：

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

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);

それが役に立てば幸い！

于 2013-08-30T06:41:59.503 に答える
7

この投稿は私にとって大きな助けになりました。私は常にノックアウトを使用する新しい方法を見つけています。私は、ko.mappingプラグインのみを使用してnemesvが提案したことを正確に実行する1つの便利な変更を追加したかっただけです。

//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);

このjsFiddleで示されているように。

于 2013-12-06T16:24:30.183 に答える
5

再帰的なカスタムバインディング

別の解決策は、テンプレートが遅いことを読んだ後、再帰的バインディングを使用することを検討しています。

<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);

再帰の前にデータを操作する機会があると便利です。

JSFiddle

于 2014-07-28T05:41:06.117 に答える