Fatal编程技术网
  • polymer/
  • Polymer 如何将聚合物自定义元素绑定到内容？

Polymer 如何将聚合物自定义元素绑定到内容？

polymer

Polymer 如何将聚合物自定义元素绑定到内容？,polymer,Polymer,我正在尝试创建一个元素，该元素具有动态数量的选项卡，这取决于为该元素提供的内容。我唯一知道如何做到这一点的方法是在JS中，但我有一种感觉，这不是聚合物的方式，我错过了什么？你能给我指一些文档或其他元素来帮助我入门吗 以下是我目前掌握的情况： 使用我的自定义元素 <code-file-set> <a href="#" tabTitle="onelink">onelink</a> <a href="#" tabTitle="twolink">

我正在尝试创建一个元素，该元素具有动态数量的选项卡，这取决于为该元素提供的内容。我唯一知道如何做到这一点的方法是在JS中，但我有一种感觉，这不是聚合物的方式，我错过了什么？你能给我指一些文档或其他元素来帮助我入门吗

以下是我目前掌握的情况：

使用我的自定义元素

<code-file-set>
   <a href="#" tabTitle="onelink">onelink</a>
   <a href="#" tabTitle="twolink">twolink</a>
   <a href="#" tabTitle="threelink">threelink</a>
</code-file-set>

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/core-pages/core-pages.html">
<link rel="import" href="/bower_components/paper-tabs/paper-tabs.html">

<polymer-element name="code-file-set">
  <template>

      <paper-tabs id="tabs" selected={{selected}}>
      </paper-tabs>

      <core-pages selected="{{selected}}">
        <content id="codecontent" select="a"></content>
      </core-pages>
  </template>

<script>

  Polymer('code-file-set', {
    domReady: function() {
      var codeNodes = this.$.codecontent.getDistributedNodes();

      for (var i = 0; i < codeNodes.length; i++) {
        var name = codeNodes[i].getAttribute('tabTitle');
        var tab = document.createElement('paper-tab');
        tab.innerHTML = name;
        this.$.tabs.appendChild(tab);
      }    
      this.selected = 0;
    },
  });
</script>
</polymer-element>
我的自定义元素的实现

<code-file-set>
   <a href="#" tabTitle="onelink">onelink</a>
   <a href="#" tabTitle="twolink">twolink</a>
   <a href="#" tabTitle="threelink">threelink</a>
</code-file-set>

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/core-pages/core-pages.html">
<link rel="import" href="/bower_components/paper-tabs/paper-tabs.html">

<polymer-element name="code-file-set">
  <template>

      <paper-tabs id="tabs" selected={{selected}}>
      </paper-tabs>

      <core-pages selected="{{selected}}">
        <content id="codecontent" select="a"></content>
      </core-pages>
  </template>

<script>

  Polymer('code-file-set', {
    domReady: function() {
      var codeNodes = this.$.codecontent.getDistributedNodes();

      for (var i = 0; i < codeNodes.length; i++) {
        var name = codeNodes[i].getAttribute('tabTitle');
        var tab = document.createElement('paper-tab');
        tab.innerHTML = name;
        this.$.tabs.appendChild(tab);
      }    
      this.selected = 0;
    },
  });
</script>
</polymer-element>


聚合物（“代码文件集”{
domReady:function（）{
var codeNodes=this.$.codecontent.getDistributedNodes（）；
对于（var i=0；i
这是可行的，但看起来很难看。也就是说，可以不使用JS创建选项卡，而是使用HTML以更具声明性的方式创建选项卡（注意，我为内容中的每个元素创建了一个选项卡）。

正确的数据绑定解决方案是定义一个数组（
选项卡
）作为一个示例，使用
模板repeat
迭代数组并将每个项填充到UI中

<polymer-element name="code-file-set" attributes="tabs">
    <template>
        <paper-tabs style="background-color:limegreen" selected="0">
            <template repeat="{{tab in tabs}}">
                <paper-tab>
                    <a href="{{tab.link}}">{{tab.tabTitle}}</a>
                </paper-tab>
            </template>
        </paper-tabs>
    </template>

    <script>
        Polymer('code-file-set', {
            ready: function () {
                this.tabs = [];

                for (var i = 0; i <= 3; i++) {
                    this.tabs.push({ link: '#', tabTitle: 'title ' + i });
                }
            },
        });
    </script>
</polymer-element>


聚合物（“代码文件集”{
就绪：函数（）{
this.tabs=[]；

对于（var i=0；i一个合适的数据绑定解决方案是将一个数组（
选项卡
）定义为一个数组，并使用
模板重复
遍历数组并将每个项填充到UI上


<polymer-element name="code-file-set" attributes="tabs">
    <template>
        <paper-tabs style="background-color:limegreen" selected="0">
            <template repeat="{{tab in tabs}}">
                <paper-tab>
                    <a href="{{tab.link}}">{{tab.tabTitle}}</a>
                </paper-tab>
            </template>
        </paper-tabs>
    </template>

    <script>
        Polymer('code-file-set', {
            ready: function () {
                this.tabs = [];

                for (var i = 0; i <= 3; i++) {
                    this.tabs.push({ link: '#', tabTitle: 'title ' + i });
                }
            },
        });
    </script>
</polymer-element>




聚合物（“代码文件集”{
就绪：函数（）{
this.tabs=[]；

对于（var i=0；i我想添加一个答案，因为即使一个答案已经被接受，因为您不局限于使用数据绑定。在许多情况下，使用内容可能更可取。这需要做更多的工作，但如果您选择，它将允许您在其中组合其他元素

如果使用
元素，则可以使用
getDistributedNodes（）在分布式子节点处获取
。如果向
元素添加
选择
属性，它将忽略文本节点并仅创建所需元素的节点列表。例如：
。然后创建一个指向这些子元素的内部变量，并对该变量使用模板重复

代码示例：


<polymer-element name="x-menu">
  <template>
    <style>
      ::content > * {
        display: none;
      }
    </style>
    <content id="content" select="a"></content>
    <paper-tabs link>
      <template repeat="{{tab in tabs}}">
        <paper-tab>
          <a href="{{tab.href}}" horizontal center-center layout> 
            {{tab.textContent}}
          </a>
        </paper-tab>        
      </template>
    </paper-tabs>
  </template>
  <script>
    Polymer({
      domReady: function() {
        this.tabs = this.$.content.getDistributedNodes().array();
      }
    });
  </script>
</polymer-element>

<x-menu>
  <a href="#foo">Foo</a>
  <a href="#bar">Bar</a>
  <a href="#baz">Baz</a>
</x-menu>




：：内容>*{
显示：无；
}
聚合物({
domReady:function（）{
this.tabs=this.$.content.getDistributedNodes（）.array（）；
}
});


示例jsbin：


需要注意的一点是，如果您希望孩子的数量在任何时候都会发生变化，那么您应该注意使用并相应地更新您的内部变量。
我想添加一个答案，因为即使一个答案已经被接受，因为您不局限于使用数据绑定。在许多情况下，使用数据绑定可能更可取使用内容。这是一个多一点的工作，但它将允许你在其中组成其他元素，如果你这样选择

如果使用
元素，则可以使用
getDistributedNodes（）在分布式子节点处获取
。如果向
元素添加
选择
属性，它将忽略文本节点并仅创建所需元素的节点列表。例如：
。然后创建一个指向这些子元素的内部变量，并对该变量使用模板重复

代码示例：


<polymer-element name="x-menu">
  <template>
    <style>
      ::content > * {
        display: none;
      }
    </style>
    <content id="content" select="a"></content>
    <paper-tabs link>
      <template repeat="{{tab in tabs}}">
        <paper-tab>
          <a href="{{tab.href}}" horizontal center-center layout> 
            {{tab.textContent}}
          </a>
        </paper-tab>        
      </template>
    </paper-tabs>
  </template>
  <script>
    Polymer({
      domReady: function() {
        this.tabs = this.$.content.getDistributedNodes().array();
      }
    });
  </script>
</polymer-element>

<x-menu>
  <a href="#foo">Foo</a>
  <a href="#bar">Bar</a>
  <a href="#baz">Baz</a>
</x-menu>




：：内容>*{
显示：无；
}
聚合物({
domReady:function（）{
this.tabs=this.$.content.getDistributedNodes（）.array（）；
}
});


示例jsbin：


需要注意的一点是，如果你希望孩子的数量在任何时候都会发生变化，那么你应该注意使用并相应地更新你的内部变量。
我认为你所拥有的一切都是好的。你也可以这样做：但它也涉及JavaScript。如果你使用这种方法，你还需要注意什么时候有人出现e使用onmutation添加或删除一个孩子我认为你所拥有的是好的。你也可以这样做：但它也涉及JavaScript。如果你使用这种方法，你还需要注意有人使用onmutation添加或删除一个孩子。这也是一个很好的解决方案。谢谢！哦，很好。这也是一个很好的解决方案。Thanks！