如何用流星在聚合物中进行数据绑定

Question

我对数据绑定和这两个框架非常陌生。现在我很困惑如何在聚合物元素中绑定数据。

例如，我有一个带有书名的书单。如果我只使用 blaze 进行渲染，我会按照以下方式进行：

//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>