如何从嵌套的聚合物元素中访问对象属性？

Question

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

<core-list id="eventData">
    <template>
        <event-card event="{{model}}"></event-card>
    </template>
</core-list>

使用以下脚本：

<script type="text/javascript">
    var data = [
                // server side code to populate the data objects here
            ];
    var theList = document.querySelector('core-list')
    theList.data = data;
    function navigate(event, detail, sender) {
        window.location.href = '/events/show/?eventId=' + event.detail.data.id
    }
    theList.addEventListener("core-activate", navigate, false);
</script>

在 event-card.html 中，模板中的以下标记达到了预期的效果：

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

因此，我似乎被在不同上下文中评估属性和属性的不同方式所吸引，但我不确定这是否是我的代码中的错误，甚至不确定接下来要尝试什么方法。

Answer 1

因为“event”属性是在处理模板时由 Polymer 设置的，所以准备好的事件处理程序是错误的地方（顺便说一下，使用 Polymer，您应该考虑使用“domReady”事件处理程序）。

无论如何，要让您的场景正常工作，只需向您的 Polymer 组件添加一个“eventChanged”方法即可。每当属性更改时（Polymer 执行模板元素时也是如此），将调用“[propertyName]Changed(oldVal, newVal)”（如果存在）以指示组件的更改。

所以实现这个方法，你就完成了。

您的代码中还有一个警告：您应该考虑使用“this.event”来访问属性值（或者最好的解决方案是使用 eventChanged(oldVal,newVal) 方法的“newVal”参数）。

Answer 2

为什么不从一开始就使用 Polymer 的归因模型？

<polymer-element attributes="event">

<script>
 Polymer("event-card", {

   ready: function() {
     var theEvent = this.event;
   }
 });
</script>

</polymer-element>