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>

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

1 个答案: