polymer-1.0 - Polymer 1.0 dom-repeat 的问题

Question

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

我想在 custom-element-list 中显示来自 firebase 的相同项目，但是如果我从 firebase 加载项目，我的 custom-element-list 不会填充这些项目。

请参阅守则。同时非常感谢。

自定义元素: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 Chat 中指向一个关于 dom-repeat 的 Polymer Github 问题后 Github Issue并阅读 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>