Data binding 如何计算polymer中的表达式（相当于PHP中的“eval”）_Data Binding_Polymer

Data binding 如何计算polymer中的表达式（相当于PHP中的“eval”）

data-binding polymer

Data binding 如何计算polymer中的表达式（相当于PHP中的“eval”）,data-binding,polymer,Data Binding,Polymer,我正在用聚合物构建一个简单的桌子组件。我正在传递项目列表（对象数组）以及要显示的属性列表 <div class="table-header"> <template is="dom-repeat" items="{{columns}}" as="column"> <div class="cell"> [[column.heading]] </div> </template> </div>

我正在用聚合物构建一个简单的桌子组件。我正在传递项目列表（对象数组）以及要显示的属性列表

  <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';
    }

  }

例如，我想告诉组件：只显示我将传递给您的每个对象的“name”和“number”属性

  <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';
    }

  }

这就是我如何调用组件的方法：

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

  <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';
    }

  }

到目前为止，一切顺利，这很容易

  <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';
    }

  }

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

  <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';
    }

  }

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

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

  <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';
    }

  }

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

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

  <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';
    }

  }

在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>

  <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';
    }

  }

希望这现在更有意义。谢谢你陪我在那里

如果我正确理解了您的问题，您希望在columns数组循环中有一个内部循环，在其中迭代column对象的各个键

  <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';
    }

  }

如果是这样，也许会有帮助

  <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';
    }

  }

你好，休伯特，我还是不确定我现在是否正确理解了你的问题，因为我在你的数据中没有看到name属性。但我加了一个，也许这就是你要找的

  <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';
    }

  }

您的组件将如下所示：

  <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';
    }

  }


[[列标题]]
[[column.name]]
聚合物({
是‘酷桌’，
特性：{
项：{type:Array}，
列：{type:Array}
},
isPropertyEqName:函数（搜索）{
返回函数（项目）{
return item.property=='name'；
}
}

}))；

  <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';
    }

  }

您对组件的使用如下所示，其中我添加了name属性

  <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';
    }

  }

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

如果我正确理解了您的问题，您希望在columns数组循环中有一个内部循环，在该循环中迭代column对象的各个键

  <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';
    }

  }