Pieter Van der Haegen Pieter Van der Haegen - 3 months ago 11
Javascript Question

Poylmer dom-repeat data-context not set

I'm making a site in Polymer with a rest api as backend. I used a lot of dom-repeats but this particular one won't work. It's for a calendar page. The right amount of items are generated but they don't have a data context...

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../bower_components/paper-spinner/paper-spinner.html">

<link rel="import" href="calendar-month.html">
<link rel="import" href="shared-styles.html">

<script src="../bower_components/moment/min/moment.min.js"></script>
<script src="../bower_components/moment/locale/nl.js"></script>
<script>
moment.locale('nl');
</script>

<dom-module id="calendar-page">
<template>
<style include="shared-styles"></style>

<template is="dom-if" if="[[loading]]">
<div class="spinner-container">
<paper-spinner active></paper-spinner>
</div>
</template>

<template is="dom-repeat" items="[[months]]" as="month">
<calendar-month name="[[month.name]]" calendar-items="[[month.calendarItems]]"></calendar-month>
</template>

<iron-ajax auto url="corrert.api/url" handle-as="json" debounce-duration="300" last-response="{{calendarItems}}" on-response="handleResponse"></iron-ajax>
</template>
<script>
Polymer({
is: 'calendar-page',
properties: {
months: Array,
calendarItems: Array,
loading: {
type: Boolean,
value: true
}
},
handleResponse: function () {
this.months = []
var now = moment().subtract(1, 'M');
var monthNumbers = [];
for(var i = 0; i < 6; i++){
var nowI = now.add(1, 'M');
monthNumbers.push(nowI.month());

var month = {
name: this.capitalizeFirstLetter(nowI.format('MMMM')),
calendarItems: []
}
this.months.push(month);
}

this.test = this.months[0];

for(var i = 0; i < this.calendarItems.length; i++){
var calendarItem = this.calendarItems[i];
var calendarDate = moment(calendarItem.date);
var monthIndex = monthNumbers.indexOf(calendarDate.month());
if(monthIndex !== -1 && calendarDate.year() >= moment().year()){
this.months[monthIndex].calendarItems.push(calendarItem);
}
}
this.loading = false;
},
capitalizeFirstLetter: function (string) {
return string.charAt(0).toUpperCase() + string.slice(1);
},
});
</script>
</dom-module>


There are 6 calendar-month elements generated but the name and calendar-items attribute aren't filled correctly... If i just type the items it works so it isn't the calendar-month element. If I print the months array in the console everything looks like it should be...

kpg kpg
Answer

You need to use the array mutation methods described here.

So, this.push('months', month); instead of this.months.push(month);