如何将属性传递给导入的隐藏自定义聚合物元素

Question

在创建自定义 Polymer 元素之前：

<polymer-element name="my-custom-element" attributes="key" hidden>
  <script>
    Polymer({});
  </script>
</polymer-element>

当我将它导入另一个自定义 Polymer 元素时，我想将属性传递给我导入的隐藏自定义 Polymer 元素，如下所示：

<link rel="import" href="../my-custom-element/my-custom-element.html" key="15">

我该怎么办？有可能这样做吗？如果不是，有什么好的方法吗？

Answer 1

要传递自定义属性，您需要一个自定义元素。标签 "link" 不是自定义元素。创建您自己的自定义元素并将它们实现到您的网络应用程序 read this.

如果您还没有，请按照整个教程进行操作:)

编辑： 自定义元素的导入与使用它不同。您可以导入自定义元素，然后编写具有特定属性的标签。

<my-custom-element key="15"></my-custom-element>

很像使用核心-ajax：

<core-ajax
    auto
    url="http://gdata.youtube.com/feeds/api/videos/"
    params='{"alt":"json", "q":"chrome"}'
    handleAs="json"
    on-core-response="{{handleResponse}}"></core-ajax>

看来你想要这样：

<link
    rel="import"
    href="../core-ajax/my-custom-element.html"
    auto
    url="http://gdata.youtube.com/feeds/api/videos/"
    params='{"alt":"json", "q":"chrome"}'
    handleAs="json"
    on-core-response="{{handleResponse}}"></link>

抱歉，Polymer 不是这样工作的！

Answer 2

正如 wirlez 指出的那样，您需要导入元素的定义、创建实例并将键值设置为属性。

例如：

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>Polymer</title>
    <script src="http://www.polymer-project.org/components/webcomponentsjs/webcomponents.js"></script>
    <!-- import element definition from jsbin -->
    <link rel="import" href="http://jsbin.com/mojadu.html">
  </head>
  <body>
    <x-foo key="42"></x-foo>
  </body>
</html>

元素定义

<!-- Make sure your element imports Polymer as a dependency -->
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">

<polymer-element name="x-foo" attributes="key" hidden>
  <template>
    <h1>Hello from x-foo</h1>
    <h2>The key is {{key}}</h2>
  </template>
  <script>
    Polymer({
      keyChanged: function(oldVal, newVal) {
        console.log('the key is', newVal);
      }
    });
  </script>
</polymer-element>

Here's the example running in jsbin.

如果查看控制台，您会看到该元素正在记录键的值。

如果您尝试在 index.html 中使用 JavaScript 访问该元素，您可能需要等待 the polymer-ready event 之后才能对其进行操作。

例如：

document.addEventListener('polymer-ready', function() {
  var el = document.querySelector('x-foo');
  // do something with x-foo that involves its key
});

Answer 3

假设这是你的聚合物文件：

<polymer-element name="my-custom-element" attributes="key" hidden>
      <script>
        Polymer({});
      </script>
    </polymer-element>

这是您的 link 在您的 html 中导入文件：

<link rel="import" href="../my-custom-element/my-custom-element.html" key="15">

有几种方法可以满足您的要求...

如果您希望动态创建该值，那么最好的方法是为自定义元素创建一个构造函数，如下所示：

<polymer-element name="my-custom-element" constructor='MyCustomElement' attributes="key" hidden>
          <script>
            Polymer({});
          </script>
        </polymer-element>

然后在聚合物元素的代码上创建此类元素的实例，例如：

var custom =  new MyCustomElement();

将该元素放入您的 DOM 中，例如：

var dom = document.querySelector('otherElement'); //depending on scope
dom.appendChild(custom);
custom.setAttribute('atribute', value);

or
this.$.elementID.appendChild(custom);
custom.setAttribute('atribute', value);

我希望这正是您要找的。干杯

如何将属性传递给导入的隐藏自定义聚合物元素

How can I pass attribute to an imported hidden custom polymer element

javascript

angularjs

polymer