Question

我正在使用Polymer构建一个简单的表组件。我正在传递项目列表（一个对象数组），以及我想要显示的属性列表。

所以，例如，我想告诉组件：只显示我传给你的每个对象的“名称”和“数字”属性。

这就是我调用组件的方式：

<cool-table 
  items="[[projects]]" 
  columns='[
    {"heading": "Project name", "property": "name"}, 
    {"heading": "Project number", "property": "number"}]'>
</cool-table>

所以基本上它会创建一个包含两列的表，标题为“Project name”和“Project number”，然后每一行都会显示project.name和project.number

以下是组件：

<dom-module id="cool-table">
  <template>

    <div class="table-header">
      <template is="dom-repeat" items="{{columns}}" as="column">
        <div class="cell">
          [[column.heading]]
        </div>
      </template>
    </div>

    <div class="table-content">
      <template is="dom-repeat" items="{{columns}}" as="column">
        <div class="cell">
          <!-- 
          here is where I am getting stuck:
          I want to to display [[ item.[[column.property]] ]]
          So I need to dynamically generate 
          the name of the property I'll put in the data binding
          -->
          item.[[column.property]]
        </div>
      </template>
    </div>

  </template>

  <script>
    Polymer({
      is: 'cool-table',
      properties: {
        items: {type: Array},
        columns: {type: Array}
      }
   });
  </script>

</dom-module>

在PHP中，我会做类似eval（“\ $ item。$ column.property”）的内容。

知道如何用Polymer实现这一目标吗？

更新

我正在改写这个问题，因为我意识到我在描述组件时犯了一个错误。我正在使用另一个例子，我已经简化了一切。

基本上我需要创建一个显示对象数组的组件。每个对象都在一行上，每个对象的键都在一列中。

像这样：

object1.name | object1.number | object1.type
object2.name | object2.number | object2.type
object3.name | object3.number | object3.type

到目前为止，非常好，这很容易。

现在我要做的是告诉组件需要显示哪些键，因为我不想显示所有键。

所以，我需要告诉组件：只显示“name”和“number”。然后我们将：

object1.name | object1.number
object2.name | object2.number
object3.name | object3.number

为此，我传递了我想要显示的键的名称：

<cool-table item="[[items]]" keys="['name', 'number']"></cool-table>

在cool-table.html中我会这样：

<!-- loop through all items -->
<template is="dom-repeat" items="{{items}}" as="item">
  <div class="row">

      <!-- now loop through the keys we want to display -->
      <template is="dom-repeat" items="{{keys}}" as="key">
        <div class="cell">

          <!-- 
          Here I want to display the item's value for that key
          for example if key is "name" I want to display item.name
          that's what I can't figure out how to do
          -->

        </div>
      </template>

  </div>
</template>

希望现在这更有意义。谢谢你和我一起待在这里！

Answer 1

啊，我找到了解决办法。我需要使用计算绑定：

<!-- loop through all items -->
<template is="dom-repeat" items="{{items}}" as="item">
  <div class="row">

      <!-- now loop through the keys we want to display -->
      <template is="dom-repeat" items="{{keys}}" as="key">
        <div class="cell">

          [[getValueFromKey(item, column.key)]]

        </div>
      </template>

  </div>
</template>

<script>
  getValueFromKey: function(item, key) {
    return item[key];
  }
</script>

Answer 2

如果我正确理解你的问题，你需要在一个列数组循环中内部循环，在那里迭代列对象的各个键吗？

如果是这样，也许this question / answer会有帮助吗？

嗨，休伯特，再次，不确定我现在是否理解你的问题，因为我在你的数据中没有看到姓名属性。但我添加了一个，也许这就是你要找的东西？

您的组件如下所示：

  <div class="table-header">
  <template is="dom-repeat" items="{{columns}}" as="column">
    <div class="cell">
      [[column.heading]]
    </div>
  </template>
</div>

<div class="table-content">
  <template is="dom-repeat" items="{{columns}}" as="column" filter="{{isPropertyEqName('name')}}">
    <div class="cell">
      <!-- 
      here is where I am getting stuck:
      I want to to display [[ item.[[column.property]] ]]
      So I need to dynamically generate 
      the name of the property I'll put in the data binding
      -->

        [[column.name]]


    </div>
  </template>
</div>

  </template>

  <script>
Polymer({
  is: 'cool-table',
  properties: {
    items: {type: Array},
    columns: {type: Array}
  },
  isPropertyEqName: function(search){
    return function(item){
      return item.property === 'name';
    }

  }

}）;

    </dom-module>

你对组件的使用看起来如下，我添加了name属性

<cool-table 
  items="[[projects]]" 
 columns='[
{"heading": "Project name", "property": "name", "name": "hello"}, 
{"heading": "Project number", "property": "number", "name": "world"}]'>
</cool-table>

如何评估聚合物中的表达式（相当于PHP中的“eval”）

2 个答案: