聚合物访问创建的组件答案

【问题标题】：Polymer accessing created components聚合物访问创建的组件
【发布时间】：2014-08-15 04:03:24
【问题描述】：

我已经尝试（猜测）了许多可能的选项并进行了搜索，但我找不到在按下按钮时如何检查创建的复选框。我知道我需要阅读更多内容，我不会放弃，但如果有人可以提供帮助，我确实想快速前进，我想进入应用程序的下一部分。谢谢

<div id="divc">
    <core-selector target="{{$.myForm}}" itemsSelector="input[type=checkbox]" 
        selected="{{Index}}" valueattr="value" activateEvent="change">
    </core-selector>

    <form id="myForm">

    <template repeat="{{cItem, Index in carray}}"> 
        <label><input name="{{Index}}" type="checkbox" value="{{Index}}">            {{cItem._Ffield}}</label> <br> 
    </template> 

    </form>

 </div>

在脚本中，当按下按钮时，我可以移动到下一个复选框

<script>

Polymer('my-element', {
    created: function()
    {
        this.Index = 0;
    },
    increment: function(e){
        //would like to check the checkbox before moving to the next, I thought it would be easy but nothing seems to work.

        this.Index++;  //move to next
    }

});

</script>

【问题讨论】：

您好，我从未找到解决方案。换句话说，我如何访问使用重复创建的项目列表中的一个项目。类似 (List.Item[6] as TCheckbox).Checked 是否是 Pascal，我似乎无法找到答案。谢谢肖恩

标签： arrays checkbox repeat polymer checked

【解决方案1】：

我不确定我是否明白你到底想要什么......

这是一个带有动态创建的复选框和一个检查它们的按钮的表单...

我撕掉了所有其他的东西（这个例子不需要）

<!doctype html>
<html>
<head>
  <script src="/components/platform/platform.js"></script>
  <style>
    body {
      font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
      margin: 0;
    }
  </style>
    <link rel="import" href="/components/polymer/polymer.html">
  <script>
  </script>
</head>
<body fullbleed unresolved>
 <my-element>  
 </my-element>  

 <polymer-element name="my-element"> 
    <template>
      <form id="myForm">
        <template repeat="{{cItem in carray}}"> 
            <label><input name="{{Index}}" type="checkbox">{{cItem}}</label> <br> 
        </template> 
        <input type="button" on-tap="{{checkAllBoxes}}" value="CHECK">
      </form>
    </template>
  <script> Polymer('my-element', { 
        created: function()
    {
        this.carray = ['a','b','c'];
    },
    checkAllBoxes: function(e){
      var c = this.shadowRoot.querySelectorAll('input[type=checkbox]');
      c.array().forEach(
        function(e,i,a) {e.checked = true;}
      );
    },
}); 
  </script>
</polymer-element>  

</body>

</html>

【讨论】：