dom-repeat 的 Polymer 1.0 问题

Question

我希望有人可以帮助我。我真的很沮丧。 :-( 我不知道如何在聚合物 1.0 中使用新的 dom-repeat 模板。

我想在自定义元素列表中显示来自 firebase 的相同项目，但如果我从 firebase 加载项目，我的自定义元素列表不会填满这些项目。

请参阅代码。非常感谢。

自定义元素：my-uebersicht

<dom-module id="my-uebersicht">
  <style>
    :host {
      display: block;
    }

    #fabTest {
      position: absolute !important;
      right: 10px;
      top: 10px;
    }
  </style>
  <template>
    <h1 class="paper-font-display1"><span>Übersicht</span></h1>
 
    <my-zeiteintrag-list zeiteintraege="{{zeiteintraege}}"></my-zeiteintrag-list>
 
    <paper-fab id="fabTest" mini icon="polymer" on-click="loadUebersicht"></paper-fab>
  </template>
</dom-module>
 
<script>
  (function() {
    Polymer({
      is: 'my-uebersicht',

      routeTo: function(route) {
        document.querySelector('#app').route = route;
      },

      loadUebersicht: function() {
        var id = document.querySelector('#app').getUserId();
        var uname = document.querySelector('#app').getUsername();

        if ((typeof id === 'undefined') || (typeof uname === 'undefined')) {
          this.routeTo('login');
        }

        var that = this;
        var rootRef = new Firebase("https://<FIREBASE.com>/" + id);
        rootRef.on("value", function(snapshot) {

          snapshot.forEach(function(child) {

            var zeintrag = child.val();
            that.zeiteintraege.push(zeintrag);

          });
        });
      },

      ready: function() {
        this.zeiteintraege = [];
      }
    })
  })();
</script>

自定义元素：my-zeiteintrag-list

<dom-module id="my-zeiteintrag-list">
    <style>
      :host {
        display: block;
      }
    </style>
  <template>
 
    <template is="dom-repeat" items="{{zeiteintraege}}">
      <my-zeiteintrag-item zeiteintrag="{{item}}"></my-zeiteintrag-item>
    </template>
 
  </template>
</dom-module>
<script>
  (function () {
    Polymer({
      is: 'my-zeiteintrag-list',

      properties: {
        zeiteintraege: {
          type: Array,
          value: [],
          notify: true,
          reflectToAttribute: true
        }
      },

      ready: function() {
        this.zeiteintraege = this.zeiteintraege || [];
      }
    });
  })();
</script>

自定义元素：my-zeiteintrag-item

<dom-module id="my-zeiteintrag-item">
  <style>
    :host {
      display: block;
    }
  </style>
  <template>
 
    <paper-material elevation="1">
      <ul>
        <li>Projekt: <span class="paper-font-body1">{{zeiteintrag.projekt}}</span></li>
        <li>Vorgang: <span class="paper-font-body1">{{zeiteintrag.vorgang}}</span></li>
        <li>Artikel: <span class="paper-font-body1">{{zeiteintrag.artikel}}</span></li>
        <li>Datum: <span class="paper-font-body1">{{zeiteintrag.datum}}</span></li>
        <li>Dauer: <span class="paper-font-body1">{{zeiteintrag.dauer}}</span></li>
        <li>Bemerkung: <span class="paper-font-body1">{{zeiteintrag.bemerkung}}</span></li>
      </ul>
    </paper-material>
 
  </template>
</dom-module>
 
<script>
  (function () {
    Polymer({
      is: 'my-zeiteintrag-item',

      properties: {
        zeiteintrag: {
          type: Object,
          value: {},
          notify: true,
          reflectToAttribute: true
        }
      },

      ready: function() {
        this.zeiteintrag = this.zeiteintrag || {};
      }
    });
  })();
</script>

[编辑] - 找到解决方案

在 Polymer Slack 聊天 Github Issue 指向有关 dom-repeat 的 Polymer Github 问题后，再次阅读 Documentation。您必须对数组使用 Polymer 方法（push、pop、splice、shift、unshift）来触发更新。

这是可行的解决方案：

自定义元素：my-uebersicht

<script>
  (function() {
    Polymer({
      is: 'my-uebersicht',

      routeTo: function(route) {
        document.querySelector('#app').route = route;
      },

      loadUebersicht: function() {
        var id = document.querySelector('#app').getUserId();
        var uname = document.querySelector('#app').getUsername();

        if ((typeof id === 'undefined') || (typeof uname === 'undefined')) {
          this.routeTo('login');
        }

        var that = this;
        var rootRef = new Firebase('https://<FIREBASE>.com/erfassung/' + id);
        rootRef.on('value', function(snapshot) {

          that.zeiteintraege = [];

          snapshot.forEach(function(child) {
            var zeintrag = child.val();
            that.push('zeiteintraege', zeintrag); //THIS IS ALL!!!
          });
        });
      },

      ready: function() {
        this.zeiteintraege = [];
      }
    });
  })();
</script>

Answer 1

不确定您是否正在寻找类似的东西：

<dom-module id="my-zeiteintrag-list">
  <template>
    <template is="dom-repeat" items="zeiteintraglist">
      <div>
        <span>{{item.name}}</span><br />
        <span>{{item.country}}</span>, <span>{{item.phone}}</span>.<br />
        <span><a href$="{{generateEmailLink(item.email)}}"><span>{{item.email}}</span></a></span>
      </div>
    </template>
  </template>
</dom-module>

<!--Script section starts -->
<script>
  (function () {
          Polymer({
              // define element prototype here
              is: 'my-zeiteintrag-list',
              generateEmailLink: function(value)  {
                //Computed property, since 1.0 does not allow string concatenation
                return "mailto:" + value;
              },
              ready: function () {
                  this.zeiteintraglist = [
                    { "name": "John Doe", "country": "USA", "phone": "1 202 303 4567", "email": "jhondoe@sample.com"},
                    { "name": "Sara O'coner", "country": "USA", "phone": "1 202 303 4567", "email": "sara@sample.com"}
                  ];
              }
          });
      })();
</script>

Answer 2

很高兴看到您找到了解决方案。我想稍微谈谈为什么。 Polymer 数据绑定建立在事件之上以提高效率。当一个值发生变化或替换时，Polymer 会向绑定到该数据的组件发送事件，并且它们会更新。直接突变阵列不会触发这些事件，因为阵列不知道聚合物。因此，polymer 提供了它自己的 push、pop、shift、unshift 和 splice 版本，因为这些版本在更新数组之前会触发正确的事件。

一般来说，在聚合物中进行数据绑定时，请务必牢记这一点。如果您有一个对象，并且您在聚合物之外修改该对象的属性（因此不使用 this.set 之类的东西），您将必须手动通知 Polymer 更新的路径，以便从该对象渲染的模板可以知道更新。