ポリマーの式を評価する方法（PHPの "eval"に相当）

Question

私はPolymerで簡単なテーブルコンポーネントを構築しています。私はアイテムのリスト（オブジェクトの配列）と、私が表示したいプロパティのリストを渡しています。

たとえば、コンポーネントに伝えたいのは、渡す各オブジェクトの「名前」と「番号」のプロパティのみを表示することです。

これは私がコンポーネントが呼び出される方法です。

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

だから、基本的には見出し「プロジェクト名」と「プロジェクト数」で、2つのカラムを持つテーブルを作成し、その後、各行は、プロジェクトが表示されます.nameのとproject.number

ここでは、コンポーネントです：PHPで

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

私はevalのようなもの（ "\の$アイテムの$ column.property"）を行うだろう

これはPolymerでどのように達成できますか？

---

アップデート：私はコンポーネントを記述する際にミスを犯したので、実現

私は質問を言い換えています。私はすべてを単純化した別の例を使用しています。

基本的には、オブジェクトの配列を表示するコンポーネントを作成する必要があります。各オブジェクトは1行にあり、各オブジェクトのキーは1列になります。

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

これまでのところ、とても良い、それは簡単です：このように

。

ここでは、すべてのキーを表示したくないため、どのキーを表示する必要があるかをコンポーネントに伝えることができます。

だから、私はコンポーネントに言う必要があります： "name"と "number"だけを表示します。その後、我々は持っているでしょう：

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

をクールtable.htmlで私はこれを持っているでしょう：

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

は私が表示したいキーの名前を渡していることを行うには

を

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

ああadddedどこ

</dom-module> 

とコンポーネントの使用は、なり、私は解決策を見つけました。計算されたバインディングを使用する必要がありました。

<!-- 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が役に立ちますか？

あなたのデータに名前のプロパティが表示されないので、私は今あなたの質問を正しく理解しているかわかりません。しかし、私は1つを追加しました、そして、これはあなたが探しているものでしょうか？

あなたのコンポーネントは次のようになります。

<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プロパティ

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