javascript - 如何从嵌套 polymer 元素访问对象属性？

Question

我想从嵌套在列表中的自定义 polymer 元素访问 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”参数)。