Как обрабатывать рекурсивно вложенные компоненты в 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?

UPDATE

Я собрал 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 });