4
我希望有人能幫助我。我真的很沮喪。 :-(我不知道如何使用聚合物1.0的新dom重複模板聚合物1.0 dom-repeat問題
我想顯示自定義元素列表中的firebase相同的項目，但如果我加載從firebase ，我的自定義元素的列表並不在此期間與項目填補
請參閱Code非常感謝
自定義元素：。我-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>自定義元素：我-zeiteintrag列表
<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>自定義元素：我-zeiteintrag項目
<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>[編輯] - 找到一個解決辦法
指着大約在聚合物鬆弛DOM重複一個聚合物Github的問題聊天Github Issue並再次讀取Documentation後。您必須使用聚合物方法（推，彈出，拼接，移位，不移位）觸發更新。
這裏是工作的解決方案：
自定義元素：我-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>
看起來很乍看。你可能有完整的代碼公開回購？ – north
是的，我有。 [回購]（https://github.com/flashback2k14/Polymer10FirebaseTest）。也許這是index.html中的dom綁定問題！該測試項目是聚合物入門套件的改進。 – flashback2k14