0

我尝试使用以下polymer's template repeat功能将自定义子元素绑定到本地存储的值：

<polymer-element name="aw-outerElement">
<template>
    <template repeat="{{group in grouplist}}">
        <aw-innerElement groupId="{{group.groupId}}" name="{{group.name}}" val="{{group.val}}"></aw-innerElement>
    </template>
</template>
<script>
Polymer('aw-outerElement', {
ready : function () {
    // Binding the project to the data-fields
    this.prj = au.app.prj;
    this.grouplist =  [ 
                    { groupId: 100, name: 'GroupName1', val: this.prj.ke.groupVal100},
                    { groupId: 200, name: 'GroupName2', val: this.prj.ke.groupVal200}

    ];
}
</script>

在上面的代码中，我尝试通过属性传递数据绑定this.prj.ke.groupVal100和this.prj.ke.groupVal200 我的内部元素。这是一个自定义元素，其中 value 属性应设置为例如。似乎只会设置存储的初始值0而不是value 属性内的数据绑定字符串 。有没有办法与内部元素进行数据绑定？aw-innerElementvalaw-innerElementpaper-inputthis.prj.ke.groupVal100this.prj.ke.groupVal100template repeat

我的内部元素如下所示：

<polymer-element name="aw-innerElement" attributes="groupId name val">
<template>
    <paper-input type="number" floatingLabel label="{{groupId}} {{name}}" value="{{val}}" error="{{i18nnrerror}}"></paper-input>
</template>
<script>
Polymer('aw-innerElement', {
publish: {
     groupId: 0,
     name: '',
     val: 0
},

ready : function () {
    // Binding the project to the data-fields
    this.prj = au.app.prj;
    ...

}
</script>

正如您在上面看到的value="{{val}}"，我的 innerElement 应该设置为this.prj.ke.groupVal100and this.prj.ke.groupVal200。

提前致谢！

4

3 回答 3

1

我知道我正在挖掘一个老问题，但对于未来的搜索者来说，这可能会派上用场。Polymer 不允许变量作为您的键，因此您需要通过如下函数将其拉出：

...
<template is="dom-repeat" items="{{users}}">
  <li>{{showValue(item)}}</li>
</template>
...

<script>
  Polymer('aw-outerElement', {
    // Standard Polymer code here
    showValue: function(item){
      return item[myVar];
    }
  });
</script>

然后，您可以随意操作 in并在itemsJavascript中返回该项目的输出。

于 2015-07-14T13:22:23.547 回答
0

我是聚合物新手，所以也许我的回答不正确。但我做了你想做的这样的事情。

这是我的代码示例

我猜你的问题是你没有在你的模板上使用绑定

<template bind="{{grouplist}}">
    <template repeat="{{group in grouplist}}">
    </template>
</template>


<script>
Polymer('aw-outerElement', {
ready : function () {
    // Binding the project to the data-fields
    this.prj = au.app.prj;
    this.grouplist =  [ 
                    { groupId: 100, name: 'GroupName1', val: this.prj.ke.groupVal100},
                    { groupId: 200, name: 'GroupName2', val: this.prj.ke.groupVal200}
    ];
}
</script>
于 2014-08-20T17:13:50.343 回答
0

在这个例子中，传入一个值似乎对我来说很好：http: //jsbin.com/kalih/4/edit

<polymer-element name="x-bar">
  <template>
    <paper-input id="input"
                 label="{{name}}"
                 value="{{val}}">
    </paper-input>
    <button on-tap="{{logVal}}">Log val</button>
  </template>
  <script>
    Polymer('x-bar', {
      publish: {
        val: 0
      },
      logVal: function() {
        console.log(this.$.input.value);
      }
    });
  </script>
</polymer-element>

<polymer-element name="x-foo">
  <template>
    <template repeat="{{item in items}}">
      <x-bar name="{{item.name}}" val="{{item.val}}"></x-bar>
    </template>
  </template>
  <script>
    Polymer('x-foo', {
      ready: function() {
        this.items = [
          {
            name: 'baz',
            val: 28
          },
          {
            name: 'qux',
            val: 42
          }
        ];
      }
    });
  </script>
</polymer-element>  

<x-foo></x-foo>

顺便说一句，您aw-innerElement不需要具有attributes属性，因为您正在使用该publish对象（它们具有相同的目的，但发布允许您设置默认值，您已经完成了）。此外，我们建议您不要将元素名称大写，HTML 解析器实际上会将它们全部小写。

于 2014-08-21T03:09:48.497 回答