[英]How to Handle Recursively Nested Components in RivetsJS?
我目前有一個在父子關系中與其自身相關的模型。 我需要能夠在頁面上以樹狀結構顯示這些內容(即嵌套的<li>
項目)。 每個<li>
項目都將具有一個基礎HTML結構,該結構具有各種數據綁定和事件處理程序(均通過Rivets.js實現)。
我最初的想法是使用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中遞歸地嵌套組件?
UPDATE
我整理了一個jsfiddle來說明這一點。 我似乎無法使數據綁定在遞歸過程中正常工作。
好的,解決方案在這里:
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 });
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.