如何在RivetsJS中處理遞歸嵌套組件？

我目前有一個模型，在父 - 子關係中與自身相關。我需要能夠在頁面上以樹狀結構顯示這些結構（即嵌套<li>項目）。每個<li>項目將具有基礎HTML結構，該結構具有各種數據綁定和事件處理程序（全部使用Rivets.js實現）。如何在RivetsJS中處理遞歸嵌套組件？

我最初的想法是創建一個帶有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中遞歸嵌套組件的方法？

UPDATE

我放在一起的jsfiddle來說明這一點。我似乎無法在遞歸過程中使數據綁定工作。

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

來源

2016-02-09 swatkins

OK，該解決方案是在這裏：

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

來源

2016-02-09 18:31:19 swatkins

如何在RivetsJS中處理遞歸嵌套組件？

回答

相關問題