gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 06:23:52 24 4
gpt4 key购买 nike

我希望有人可以帮助我。我真的很沮丧。 :-( 我不知道如何将新的 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>

最佳答案

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

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

关于polymer-1.0 - Polymer 1.0 dom-repeat 的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30716483/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com