如何处理 RivetsJS 中的递归嵌套组件？

Question

我目前有一个在父子关系中与自身相关的模型。我需要能够在页面上以树状结构显示这些（即嵌套 <li> 项）。每个 <li> 项都有一个基础 HTML 结构，该结构具有各种数据绑定和事件处理程序（全部由 Rivets.js 实现）。

我最初的想法是创建一个 component 和 Rivets.js，然后将其嵌套在自身中。但是，我似乎无法理解如何将这些初始化并插入 DOM.

以下是我希望能够做的事情：

/** DATA LAYER **/
var item = {
    id: 1,
    title: "test item 1",
    description: "my description 1",
    someHandler: function () {
        console.log("handle something for Item 1");
    },
    items: [
        {
            id: 2,
            parentItem: 1,
            title: "test item 2",
            description: "my description 2",
            someHandler: function () {
                console.log("handle something for Item 2");
            },
            items: [

            ]
        },
        {
            id: 3,
            parentItem: 1,
            title: "test item 3",
            description: "my description 3",
            someHandler: function () {
                console.log("handle something for Item 3");
            },
            items: [
                {
                    id: 4,
                    parentItem: 3,
                    title: "test item 4",
                    description: "my description 4",
                    someHandler: function () {
                        console.log("handle something for Item 4");
                    },
                    items: [

                    ]
                }
            ]
        }
    ]
};

以及表示层：

/** TEMPLATE **/
<div id="item_template"> <!-- accessed via <my-new-item></my-new-item> in HTML -->
    <li>
        <h4 rv-text="title"></h4>
        <p rv-html="description"></p>
        <button rv-click="someHandler">Click Me!</button>
        <ol>
            <my-new-item rv-each-item="items" item="item"></my-new-item>
        </ol>
    </li>
</div>

以及业务层：

rivets.components['my-new-item'] = {
  template: function() {
    return document.querySelector('#item_template').innerHTML;
  },
  initialize: function(el, data) {
    return data;
  }
}

rivets.init('my-new-item', document.querySelector('#page'), item);

有没有办法在 RivetsJS 中递归嵌套组件？

更新

我整理了一个 jsfiddle 来说明这一点。我似乎无法在递归期间使数据绑定工作。

https://jsfiddle.net/0mv4r8w0/4/

Answer 1

好的，解决方法在这里：

https://jsfiddle.net/0mv4r8w0/5/

显然，我需要明确定义一个属性来访问数据。

模板更改为（请注意，我现在使用 item.* 访问属性）：

<div id="item_template">
    <li>
        <h4 rv-text="item.title"></h4>
        <p rv-html="item.description"></p>
        <button rv-on-click="item.someHandler">Click Me!</button>
        <ol>
            <my-new-item rv-each-item="item.items" item="item"></my-new-item>
        </ol>
    </li>
</div>

并且 rivits.init 调用更改为（注意数据现在设置为属性）：

rivets.init('my-new-item', document.querySelector('#page'), { item: item });

如何处理 RivetsJS 中的递归嵌套组件？

How to Handle Recursively Nested Components in RivetsJS?

javascript

recursion

javascript-databinding

rivets.js