我目前有一个与亲子关系有关的模型。我需要能够在页面上以树状结构显示这些结构(即嵌套的<li>
项)。每个<li>
项都有一个基础HTML结构,其中包含各种数据绑定和事件处理程序(全部使用Rivets.js实现)。
我最初的想法是使用Rivets.js创建一个component,然后将其嵌入其中。但是,我似乎无法理解这些如何被初始化并插入到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放在一起来说明这一点。我似乎无法在递归期间使数据绑定工作。
答案 0 :(得分:3)
好的,解决方案就在这里:
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 });