javascript - v1.0元素的聚合物元素访问属性

最初的目的是为聚合物元件提供可配置的图像位置。看来我已经理解了一些错误，而不是以“聚合物方式”进行操作。问题是如何实现这一目标以及该方法是否正确。

从呼叫页面：

<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

徘徊在哪里错了？它与元素的生命周期有关吗？函数调用可以延迟吗？

最佳答案

实际上，您可以回答自己的问题。 FWIW，您的原始代码中的行为是可以预期的-您可以正确地说这是由于Polymer的生命周期行为造成的。当你绑定

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

对于计算函数，当该函数中的所有属性准备就绪时，该节点将被标记。在上述情况下，您实际上传入了一个始终为“就绪”的固定变量，因此在<mycustom-element>的创建和就绪回调之间的某个时间，已经调用了getLocation()，该时间可能在已设置发布属性的默认值-聚合物属性的默认值也在创建和就绪之间进行设置-导致竞争。

在您的特定情况下，“聚合物方式”将这样声明imagelocation

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

您的<iron-image>计算函数可能看起来像这样

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

以这种方式进行操作，因为getLocation()是计算函数的参数，所以可以保证仅在正确设置imagelocation发布属性的默认值之后才调用getLocation()。

关于javascript - v1.0元素的聚合物元素访问属性，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31206939/