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

因为＆＃34;事件＆＃34;在处理模板时，属性是由Polymer设置的，ready事件处理程序是你做错的事情（顺便说一句，使用Polymer你应该考虑使用＆＃34; domReady＆＃34;事件处理程序）。

无论如何，为了让你的场景有效，只需添加一个＆＃34; eventChanged＆＃34;聚合物组件的方法。只要属性发生变化（当Polymer执行模板元素时也是如此）a＆＃34; [propertyName] Changed（oldVal，newVal）＆＃34;将被调用（如果存在）以表示对组件的更改。

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

您的代码中还有一个警告：您应该考虑使用＆＃34; this.event＆＃34;访问属性值（或作为eventChanged（oldVal，newVal）方法的＆＃34; newVal＆＃34;参数的最佳解决方案）。

Answer 2

为什么不从get go中使用Polymer的归因模型？

<polymer-element attributes="event">

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

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

</polymer-element>

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

2 个答案: