Как вы получаете доступ к свойствам объекта из вложенного полимерного элемента?

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, когда шаблон обрабатывается, готовый обработчик событий неправильное место, чтобы сделать ваши вещи (кстати, с использованием полимера, вы должны рассмотреть вопрос об использовании «domReady» обработчик события).

В любом случае, чтобы заставить ваш сценарий работать, просто добавьте метод «eventChanged» к вашему компоненту Polymer. Всякий раз, когда изменяется атрибут (это также имеет место, когда Polymer выполняет элемент шаблона), «[propertyName] Changed (oldVal, newVal)» будет вызываться (если существует), чтобы сигнализировать об изменении вашего компонента.

Итак, реализуйте этот метод, и все готово.

Еще одно предостережение в коде: вы должны использовать «this.event» для доступа к значению атрибута (или как лучшее решение для параметра newVal вашего метода eventChanged (oldVal, newVal)).

Answer 2

Почему бы не использовать модель атрибуции Полимера с самого начала?

<polymer-element attributes="event"> 

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

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

</polymer-element>