Question

最初的目的是为聚合物元件提供可配置的图像位置。似乎我已经理解了一些错误，而不是采用聚合物方式＆＃34;。问题是如何实现这一目标以及方法是否正确。

来自主叫页面：

<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>

我遇到的问题是，在浏览器上查看时，＆＃34; this.imagelocation＆＃34;是默认值，而不是调用页面提供的那个。

控制台中的输出如下：

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

徘徊有什么不对？它与元素的生命周期有关吗？函数调用可以延迟吗？

Answer 1

其实你回答了自己的问题。 FWIW，原始代码中的行为是预期的 - 你说这是由于Polymer的生命周期行为是正确的。绑定时

X1 = 1.0
X2 = (-1+4.8e-09j)
X3 = (-1-4.8e-09j)

到计算函数，当该函数中的所有属性就绪时，节点会被标记。在上面的例子中，你实际上传入了一个固定变量，它始终是＆＃34;就绪＆＃34;，因此在<iron-image src="{{getLocation('image_file_name.png')}}"></iron-image>创建和准备回调之间的某个时间，<mycustom-element>是已被调用，可能在getLocation()已发布属性的默认值设置之前或之后 - 聚合物属性的默认值也设置在创建和准备之间 - 导致竞争条件。

在您的具体情况下，＆＃34;聚合物方式＆＃34;将是这样声明imagelocation

<iron-image>

您的<iron-image src="{{getLocation(imagelocation, 'image_file_name.png')}}"></iron-image>计算函数可能看起来像这样

getLocation()

以这种方式完成，因为getLocation: function (l, f) { return (l + "/" + f.trim()); }是计算函数的参数，您可以保证imagelocation仅在<{strong> getLocation()已发布的属性后调用＆＃ 39;正确设置了默认值。

Answer 2

我花了一些时间，为了别人的利益写下这里发生的事情：

当调用“getLocation”时，它将从“iron-image”的上下文中调用。铁图像似乎继承了父元素，但由于没有提供属性，因此保留原始值“/错误”并且不会更新为正确的值。提供的值不会传播。

一种解决方法是调用“getLocation（'image_file_name.png'，imagelocation）”，它从模板的上下文中调用，因此它具有更新的正确值。

如果还有其他更合适的方法，请提出建议。

来自元素的v1.0聚合物元素访问属性

2 个答案: