Question

我想将我在自定义元素中编写的HTML插入到自定义元素中。例如：

<dom-module id="site">
<template>
<!-- other HTML -->

<!-- insert the HTML -->

<!-- other HTML -->
</template>
</dom-module>

<site>
<!-- HTML to insert -->
</site>

Answer 1

查看Polymers Templatizer行为。

https://www.polymer-project.org/1.0/docs/api/Polymer.Templatizer

您可以使用模板并标记元素中所需的实例。

首先包括Templatizer行为。然后将您想要的HTML放入标签中（在您的元素中）。在您附加的方法中，您可以通过调用与行为混合的templatize（）将该模板加载到Templatizer中。

然后，当您准备好使用该内容时，您需要标记＆＃39;它的一个例子。标记实例时，您可以传入自己的模型对象，以表示可以在实例范围内引用的数据。

<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../../paper-button/paper-button.html">

<dom-module id="my-el">
  <template>
    <template id="stampTemplate">
      <p>[[message]]</p>
    </template>                                                                                                                                                                                                                                

    <paper-button raised on-click="doStamp">Stamp</paper-button>                                                                                                                                                   

    <div id="myStamps"></div>                                                                                                                                                                                                                  
  </template>

  <script>
    Polymer({
      is: 'my-el',
      behaviors: [Polymer.Templatizer],

      attached: function() {
        // load/templatize the template
        var template = this.$.stampTemplate;
        this.templatize(template);
      },

      doStamp: function() {
        var instance = this.stamp({message: "Hello World"});
        this.$.myStamps.appendChild(instance.root);
      }          
    });
  </script>
</dom-module>

最后，您可以根据需要将该实例附加到您的页面/元素。

在上面的示例中，我有一个模板，它是一个包含消息的简单段落。单击纸张按钮时，我会使用消息＆＃34; Hello World＆＃34;标记模板的新实例。然后将此模板的实例附加到＆＃39; myStamps＆＃39;格。

有没有办法将HTML插入Polymer中的自定义元素？

1 个答案: