Question

我想迭代2个数组，包括来自iron-ajax请求的数据。

重复的两个是：

  <template is="dom-repeat" items="[[riskNamesArr]]" as="risk">
  <paper-listbox multi>
  <paper-material>{{risk}}</paper-material>
  </paper-listbox>
  </template>

   <template is="dom-repeat" items="[[riskWorkflowStateArr]]" as="state">
  <paper-listbox multi>
  <paper-material>{{state}}</paper-material>
  </paper-listbox>
  </template>

结果是

{{risk1}}
{{risk2}}
{{risk3}}
{{state1}}
{{state2}}
{{state3}}

我的问题是我想同时遍历两个数组以获得类似的东西：

{{risk1}} + {{state1}}
{{risk2}} + {{state2}}
{{risk3}} + {{state3}}

Answer 1

您可以使用computed property或computed binding。

计算属性

// template
<template is="dom-repeat" items="[[riskCombined]]">
  <div>[[item.name]] + [[item.state]]</div>
</template>

// script
Polymer({
  ...
  properties : {
    ...
    riskCombined: {
      computed: '_computeRiskCombo(riskNamesArr, riskWorkflowStateArr)'
    }
  },
  _computeRiskCombo: function(riskNamesArr, riskWorkflowStateArr) {
    return riskNamesArr.map( (x, i) => {
      return {"name": x, "state": riskWorkflowStateArr[i]}
    });
  }
});

HTMLImports.whenReady(_ => {
  "use strict";

  Polymer({
    is: 'x-foo',
    properties : {
      riskNamesArr: {
        type: Array,
        value: () => ['a','b','c']
      },
      riskWorkflowStateArr: {
        type: Array,
        value: () => [1,2,3]
      },
      riskCombined: {
        computed: '_computeRiskCombo(riskNamesArr, riskWorkflowStateArr)'
      }
    },
    _computeRiskCombo: function(riskNamesArr, riskWorkflowStateArr) {
      return riskNamesArr.map( (x, i) => {
        return {"name": x, "state": riskWorkflowStateArr[i]}
      });
    },
    ready: function() {
      this.async(() => this.riskNamesArr = ['d','e'], 1000);
    }
  });
});

<head>
  <base href="https://polygit.org/polymer+1.6.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <h4>computed property</h4>
      <template is="dom-repeat" items="[[riskCombined]]">
        <div>[[item.name]] + [[item.state]]</div>
      </template>
    </template>
  </dom-module>
</body>

codepen

计算绑定

// template
<template is="dom-repeat" items="[[_computeRiskCombo(riskNamesArr, riskWorkflowStateArr)]]">
  <div>[[item.name]] + [[item.state]]</div>
</template>

// script
Polymer({
  ...
  _computeRiskCombo: function(riskNamesArr, riskWorkflowStateArr) {
    return riskNamesArr.map( (x, i) => {
      return {"name": x, "state": riskWorkflowStateArr[i]}
    });
  }
});

HTMLImports.whenReady(_ => {
  "use strict";

  Polymer({
    is: 'x-foo',
    properties : {
      riskNamesArr: {
        type: Array,
        value: () => ['a','b','c']
      },
      riskWorkflowStateArr: {
        type: Array,
        value: () => [1,2,3]
      }
    },
    _computeRiskCombo: function(riskNamesArr, riskWorkflowStateArr) {
      return riskNamesArr.map( (x, i) => {
        return {"name": x, "state": riskWorkflowStateArr[i]}
      });
    },
    ready: function() {
      this.async(() => this.riskNamesArr = ['d','e'], 1000);
    }
  });
});

<head>
  <base href="https://polygit.org/polymer+1.6.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <h4>computed binding</h4>
      <template is="dom-repeat" items="[[_computeRiskCombo(riskNamesArr, riskWorkflowStateArr)]]">
        <div>[[item.name]] + [[item.state]]</div>
      </template>
    </template>
  </dom-module>
</body>

codepen

聚合物通过多个ironajax响应迭代/重复

1 个答案:

计算属性

计算绑定