Javascript 如何从嵌套的聚合元素访问对象属性?
我想从嵌套在列表中的自定义聚合元素访问javascript对象数据。主机页具有以下内容:Javascript 如何从嵌套的聚合元素访问对象属性?,javascript,polymer,shadow-dom,Javascript,Polymer,Shadow Dom,我想从嵌套在列表中的自定义聚合元素访问javascript对象数据。主机页具有以下内容: <core-list id="eventData"> <template> <event-card event="{{model}}"></event-card> </template> </core-list> 因此,我似乎被在不同上下文中评估属性和属性的不同方式所吸引,但我不确定这是否是我的代码中的
<core-list id="eventData">
<template>
<event-card event="{{model}}"></event-card>
</template>
</core-list>
因此,我似乎被在不同上下文中评估属性和属性的不同方式所吸引,但我不确定这是否是我的代码中的错误,甚至不确定下一步尝试什么方法。为什么不从一开始就使用Polymer的属性模型
<polymer-element attributes="event">
<script>
Polymer("event-card", {
ready: function() {
var theEvent = this.event;
}
});
</script>
</polymer-element>
聚合物(“活动卡”{
就绪:函数(){
var theEvent=this.event;
}
});
因为在处理模板时,“事件”属性是由聚合物设置的,所以就绪事件处理程序是错误的地方来处理您的东西(顺便说一下,使用Poice您应该考虑使用“DoMeDead”事件处理程序)。
无论如何,要使您的场景正常工作,只需在聚合物组件中添加一个“eventChanged”方法。每当属性发生更改时(Polymer执行模板元素时也是如此),将调用“[propertyName]Changed(oldVal,newVal)”(如果存在)以向组件发出更改信号
所以实现这个方法,你就完成了
<>你的代码中还有一个警告:你应该考虑使用“Test.Evin”来访问属性值(或者作为你的Envivchange的“NeWVAR”参数的最佳解决方案(OLDVALL,NEVALL)方法)。这是不起作用的,这个事件要么是空的对象,要么是在CeReDeD()中设置的,要么是未定义的,如果我删除回调。仅预设变量。。你能给我看看{{model}}是什么样子吗?模型实际设置在哪里?
<core-toolbar>
<div class="title">{{event.title}}</div>
</core-toolbar>
<div class="responses">{{event.numResponses}} responses</div>
Polymer('event-card', {
ready: function() {
var eventDates = [];
var theEvent = this.getAttribute('event');
console.log(theEvent);
console.log(theEvent.proposedDate);
console.log(theEvent.possibleStartDate);
console.log(theEvent.possibleEndDate);
if (theEvent.proposedDate) {
eventDates[0] == theEvent.proposedDate;
} else {
if (theEvent.possibleStartDate && theEvent.possibleEndDate) {
var startDate = moment(theEvent.possibleStartDate);
var endDate = moment(theEvent.possibleEndDate);
var difference = endDate.diff(startDate, 'days');
for (i = 0; i < difference; i++) {
eventDates[i] = startDate.add(i, days);
}
}
}
console.log(eventDates);
this.dates = eventDates;
},
created: function() {
// hint that event is an object
this.event = {};
}
});
</script>
{{model}}
undefined
undefined
undefined
Array[0]
<polymer-element attributes="event">
<script>
Polymer("event-card", {
ready: function() {
var theEvent = this.event;
}
});
</script>
</polymer-element>