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> 因此,我似乎被在不同上下文中评估属性和属性的不同方式所吸引,但我不确定这是否是我的代码中的

我想从嵌套在列表中的自定义聚合元素访问javascript对象数据。主机页具有以下内容:

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