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 Chat Github Issue指向有关dom-repeat的Polymer Github问题后再次阅读Documentation。您必须使用Array方法（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

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

＆＃13;

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

＆＃13;

Answer 2

我很高兴看到你找到了解决方案。我想先了解一下原因。聚合物数据绑定建立在事件的效率上。当一个值被改变或替换时，Polymer将事件发送到绑定到该数据的组件，并且它们会更新。直接变换数组不会触发这些事件，因为数组不知道聚合物。因此，聚合物提供了自己的推，弹，移位，非移位和拼接版本，因为这些版本在更新阵列之前会触发正确的事件。

重要的是要记住聚合物中的数据绑定。如果你有一个对象，并且修改了聚合物之外的那个对象的属性（所以不使用像this.set这样的东西），你将不得不手动通知Polymer更新的路径，以便从该对象渲染的模板可以知道更新

Polymer 1.0 dom-repeat的问题

2 个答案: