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

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>

事件内部-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

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

<polymer-element attributes="event">

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

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

</polymer-element>

Answer 2

因为 "event" 属性是在处理模板时由 Polymer 设置的，就绪事件处理程序是错误的地方来做你的事情（顺便说一下，使用 Polymer 你应该考虑使用 "domReady" 事件处理程序）。

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

所以实现这个方法就大功告成了。

代码中的另一个警告：您应该考虑使用 "this.event" 来访问属性值（或者作为最佳解决方案，您的 eventChanged(oldVal,newVal) 方法的 "newVal" 参数）。

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

How do you access object properties from a nested polymer element?

javascript

shadow-dom

polymer