v1.0 атрибут доступа к элементу полимера v1.0 от элемента

Question

Целью изобретения было предоставление настраиваемого местоположения изображения для полимерного элемента. Кажется, я понял что-то неправильно и не делал это «полимерный путь». Вопрос заключается в том, как это должно быть выполнено, и если подход является правильным.

На странице вызова:

<mycustom-element imagelocation="/correct/path/to/images"></mycustom-element> 

и элемент:

<link rel="import" href="proper/path/to/iron-image/iron-image.html"> 

<dom-module id="mycustom-element"> 
    <style> 
    :host { 
     display: block; 
    } 
    </style> 
    <template> 
    <iron-flex-layout class="layout horizontal wrap top-level-menu"> 
     <iron-image src="{{getLocation('image_file_name.png')}}"></iron-image> 
    </iron-flex-layout> 
    </template> 
</dom-module> 
<script> 
    (function() { 
    Polymer({ 
     is: 'mycustom-element', 
     properties: { 
     imagelocation: { 
      type: String, 
      value: "/wrong/path/to/images" 
     } 
     }, 
     ready: function() { 
     console.info('RD', this.imagelocation); 
     }, 
     getLocation: function(imageFilename) { 
     console.info('GLOC', this.imagelocation); 
     console.info('GLOC_PROP', this.properties.imagelocation.value); 
     return this.imagelocation + '/' + imageFilename.trim(); 
     } 
    }); 
    })(); 
</script> 

Проблема, что у меня есть то, что при просмотре в браузере, значение «this.imagelocation» является по умолчанию один, а не тот, который указан на вызывающей странице.

Выход в консоли следующее:

GLOC undefined 
GLOC_prop /wrong/path/to/images 
RD /correct/path/to/images 

бродила, что не так? Это связано с жизненным циклом элемента? Можно ли задержать вызов функции?

Answer 1

На самом деле вы ответили на свой вопрос. FWIW, поведение в вашем исходном коде ожидается - и вы можете сказать, что это связано с поведением Полимера в жизненном цикле. Когда вы связываете

<iron-image src="{{getLocation('image_file_name.png')}}"></iron-image> 

к вычисленной функции, узел получает штамп, когда все свойства в этой функции являются готовы. В приведенном выше случае вы фактически передали фиксированную переменную, которая всегда «готова», поэтому некоторое время между созданным и готовым обратным вызовом <mycustom-element> уже вызвано, getLocation(), которое может быть до или после значения свойства опубликованного свойства imagelocation set - значения по умолчанию для свойств Polymer также устанавливаются где-то между созданным и готовым, что приводит к состоянию гонки.

В вашей конкретной ситуации, «полимер-путь» будет объявить <iron-image> как этот

<iron-image src="{{getLocation(imagelocation, 'image_file_name.png')}}"></iron-image> 

Ваш getLocation() вычисляться функция может выглядеть примерно так

getLocation: function (l, f) { 
    return (l + "/" + f.trim()); 
} 

Done этот путь, потому что imagelocation является параметром вашей вычисленной функции, вы можете гарантировать, что getLocation() называется только послеimagelocation опубликованное значение свойства по умолчанию правильно установлено.

Answer 2

Потребовалось некоторое время, писать, что здесь происходит в пользу других:

Когда «getLocation» называется, она вызывается из контекста «железного образа». Кажется, что изображение железа наследует родительский элемент, но поскольку никакой атрибут не предоставляется, он сохраняет исходное значение «/ wrong» и не обновляется до правильного. Поставляемое значение не распространяется.

Обходным путем является вызов getLocation ('image_file_name.png', imagelocation), который вызывается из контекста шаблона, следовательно, он имеет обновленное, поэтому правильное значение.

Если есть еще один более подходящий подход, предложите его.