javascript - 如何访问 polymer 核心式生产者元素来设置其字段？

Question

我正在创建一个 polymer 元素，它会时不时地将其背景图像 URL 更改为通过 jsonp 调用获取的图像 URL。我正在使用一个 core-style 元素，其 id 属性(因此也是一个生产者)位于我的元素之外，另一个元素在我的元素模板内具有 ref 属性，该元素消耗生产者。我在生产者的 css 代码中有一个绑定(bind)模型引用，我想经常更改它以反射(reflect)新的图像 url。我的问题是，我无法找到要放入 url 的正确对象的正确属性，以便它将更新生成器内的 css 代码。

这是代码。我删除了 ajax 调用以使其简短:

<core-style id="my-style">
  .main {
    background-image: url({{ someUrlField }});
    background-repeat: no-repeat;
    background-size: cover;
  }
</core-style>

<polymer-element name="my-element">
  <template>
    <core-style ref="my-style"></core-style>
    <div class="main">
      Some content.
    </div>
  </template>

  <script>
    Polymer('my-element', {
      ready: function() {
        var awesomeImageUrl = 'http://whatever.com/radness.jpg';
        // where do I put it?
        // document.getElementById('my-style') returns null, as does
        // document._currentScript.ownerDocument.getElementById('my-style')
      }
    });
  </script>
</polymer-element>

我尝试使用标准 document.getElementById 调用来查找元素，但结果为空。我还尝试了 Polymer docs 上显示的 document._currentScript.ownerDocument.getElementById ，但这也为我返回一个空值。我发现的解决这个问题的唯一方法是使用 CoreStyle.g 全局对象，这确实会导致我想要的更新，但这感觉就像污染。

有没有更好的方法来做到这一点，我缺少什么？

Answer 1

您可以使用 CoreStyle.list["my-style"] 从全局 CoreStyle 对象中使用列表映射来访问该元素(引用: https://www.polymer-project.org/0.5/docs/elements/core-style.html )。

示例

<link rel="import" href="../../webcomponents/bower_components/polymer/polymer.html">
<link rel="import" href="../../webcomponents/bower_components/core-style/core-style.html">

<core-style id="demo-changeCoreStyle-Style">
 :host {
     background-image: url({{ someUrlField }});
     background-repeat: no-repeat;
     background-size: contain;
     display: block;
     width:500px;
     height:500px;
  }
</core-style>
<polymer-element name="demo-changeCoreStyle" >
 <template>
  <core-style ref="demo-changeCoreStyle-Style"></core-style>
    <h1>Test</h1>
    There is some content here<br>
    and here<br>
    and even here
 </template>
  <script>
    Polymer({
      ready: function() {
        CoreStyle.list["demo-changeCoreStyle-Style"].someUrlField = 'http://www.gnu.org/graphics/gnu-head-30-years-anniversary.png';
      }
    });
  </script>
</polymer-element>