Как сделать связывание данных в полимере с метеорным

Question

Я очень новичок в привязке данных и двух фреймворках. Сейчас я довольно зациклился на том, как привязывать данные к полимерному элементу.

Например, у меня есть список книг с названием книг. Если я использую только пламя, чтобы сделать визуализацию, я хотел бы сделать это в последующих образом:

//app.js 
Template.bookList.helpers({ 
    books: function() { 
    return Books.find({}); 
    } 
}); 

//app.html 
<template name="bookList"> 
    <h1>List</h1> 
    <ul> 
    {{#each books}} 
    {{> book}} 
    {{/each}} 
    </ul> 
</template> 

<template name="book"> 
    <li>{{name}}</li> 
</template> 

Теперь я использую его с полимером, я делаю:

//my-book-list.html 
<polymer-element name="my-book-list"> 
    <template> 
    <h1>List</h1> 
    <content></content> 
    </template> 
</polymer-element> 

//app.html 
<template name="bookList"> 
    <my-book-list> 
     <ul> 
     {{#each books}} 
     {{> book}} 
     {{/each}} 
     </ul> 
    </my-book-list> 
</template> 

<template name="book"> 
    <li>{{name}}</li> 
</template> 

Так я помещаю динамический данных внутри элемента полимера через блок содержимого. Хотя он все еще выполняет эту работу, я не хочу этого. Я хочу сделать что-то привязки данных внутри элемента полимера, как (я надеюсь, что это имеет смысл для вас):

//my-book-list.html 
<polymer-element name="my-book-list"> 
    <template bind="{{books}}"> 
    <h1>List</h1> 
    <ul> 
     <template repeat> 
     <li>{{name}}</li> 
     </template> 
    </ul> 
    </template> 
</polymer-element> 

//app.html 
<template name="bookList"> 
    <my-book-list></my-book-list> 
</template> 

Есть ли способ сделать это? Заранее спасибо.

Прогресс:

теперь я могу поставить книги чисто внутри элемента полимера, сейчас проблема в том, что он, кажется, не реагировать, когда изменение данных, поскольку полимер не наблюдает изменение объекта, и я изо всех сил найти способ наблюдать все иерархические значения внутри объекта:

<polymer-element name="my-book-list"> 
    <template bind="{{books | mapBooks}}"> 
    <h1>List</h1> 
    <ul> 
     <template repeat> 
     <li>{{name}}</li> 
     </template> 
    </ul> 
    </template> 
    <script> 
    Polymer("my-book-list", { 
     books: Books.find(), 
     mapBooks : function(booksCursor) { 
     return booksCursor.map(function(p) { return {id: p.id, name: p.name}}) 
     } 
    }); 
    </script> 
</polymer-element> 

Answer 1

Наконец получил Hacky решение, но я не знаю, если это лучшая практика или нет:

<polymer-element name="my-book-list"> 
    //Force polymer to update DOM when books.lastUpdate change 
    <template bind="{{books.lastUpdate | getBooks}}"> 
    <h1>List</h1> 
    <ul> 
     <template repeat> 
     <li>{{name}}</li> 
     </template> 
    </ul> 
    </template> 
    <script> 
    Polymer("my-book-list", { 
     ready: function() { 
     var books = this.books; 
     this.books.observeChanges( //Observe the change of cursor and update a field 
     { 
      added: function(id, fields) { 
      console.log("Item added"); 
      books.lastUpdate = new Date(); 
      }, 
      changed: function(id, fields) { 
      console.log("Item changed"); 
      books.lastUpdate = new Date(); 
      }, 
      removed: function(id, fields) { 
      console.log("Item deleted"); 
      books.lastUpdate = new Date(); 
      } 
     } 
    ), 
     books: Books.find(), 
     getBooks : function() { 
     return Books.find().map(function(p) { return {id: p.id, name: p.name}}) 
     } 
    }); 
    </script> 
</polymer-element>