Полимер 1.0: использование «железо-мета»

Правильное использование элемента Polymer 1.0 <iron-meta> сбивает с толку. Вот ссылка на Github. А вот ссылка на демонстрационный сайт Polymer.

Может ли кто-нибудь предоставить правильный пример кода, как заставить его работать?

Это код, который у меня есть до сих пор.

<dom-module id="generic-element">
  <style>...</style>
  <template>
    <iron-meta id="meta" key="info" value="foo/bar"></iron-meta>
    The <code>value</code> stored at <code>key="info"</code> is <code><span>{{test}}</span></code>. 
  </template>
</dom-module>
<script>
  (function() {
    Polymer({
      is: 'generic-element',
      properties: {
        test: {
          value: function(){
            return "Hello world"; // This is the only thing I can get to work so far.
         // return (new Polymer.IronMetaQuery({key: 'info'}).value); // Doesn't totally break.
         // All my other below attempts totally fail. Everything breaks.
         // return this.$.meta.IronMetaQuery({key: 'info'}).value;
         // return this.IronMetaQuery({key: 'info'}).value;
         // return this.$.meta.byKey('info').getAttribute('value');
         // return this.$.meta.byKey('info').value;
          }
        }
      }
    });
  })();
</script>

Вот ссылка на Github. А вот Репозиторий Github, содержащий полный код проблемы в контексте полного веб-приложения.


web-component custom-element polymer polymer-1.0
person Let Me Tink About It    schedule 07.07.2015    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Проблема с вашим кодом заключается в том, что вы пытаетесь установить значение свойства элемента по умолчанию на то, что объявлено внутри самого шаблона того же элемента. Между созданием элемента и его присоединением происходят две вещи: а) устанавливаются значения свойств по умолчанию; и b) шаблон подвергается подготовке для штамповки в DOM. Эти задачи выполняются асинхронно, поэтому, по сути, вы создаете состояние гонки.

Попробуйте установить значение по умолчанию test внутри обратного вызова ready() — обратный вызов ready() гарантирует, что DOM готов к доступу, что в вашем случае именно там, где вы объявили свой ключ <iron-meta>.

<dom-module id="generic-element">
  <style>...</style>
  <template>
    <iron-meta id="meta" key="info" value="foo/bar"></iron-meta>
    The <code>value</code> stored at <code>key="info"</code> is <code><span>{{test}}</span></code>. 
  </template>
</dom-module>
<script>
  (function() {
    Polymer({
      is: 'generic-element',
      properties: {
        test: String
      },
      ready: function () {
        // this will work
        this.test = this.$.meta.byKey("info");
      }
    });
  })();
</script>

jsbin: http://jsbin.com/vosekiwehu/edit?html,output

person zerodevx    schedule 07.07.2015
comment
Спасибо. Это сработало, но в вашем коде есть ошибка. this.$.test = this.$.meta.byKey("info"); должно быть: this.test = this.$.meta.byKey("info"); Но ваша общая идея работает. Так что я приму ваш ответ и проголосую за него. Если у вас есть минутка, вы можете пересмотреть свой ответ для тех, кто следит за тем, кому это может быть полезно. - person Let Me Tink About It; 07.07.2015
comment
О да, хороший улов. Извините за опечатку. Я исправил это. Спасибо. - person zerodevx; 07.07.2015