ハンドルバーは動的テーブルを構築するためのヘルパーを参照します

Question

ハンドルバーを使用して動的テーブルを作成したいと思います。私考える私は私の欲しい結果を達成するためにルックアップヘルパーを使用する必要があります。私はルックアップヘルパーを使用していくつかの問題を抱えています、そして、ドキュメンテーションはかなり悪いです。

私のオブジェクトの例は次のようになります。

{ 
headers:[ 
    0:"name", 
    1:"brand", 
    2:"type", 
    3:"rating", 
    4:"edited" 
] 
tableContent:[ 
    0:{ 
    contentName:{ 
     name:"Fanta", 
     brand:"Coca-Cola Company", 
     type:"Soda", 
     rating:"3", 
     edited:"2017-05-24"} 
    } 
] 
} 

ハンドルテンプレート：

<script id="itemTemplate" type="text/x-handlebars-template"> 
    <table id="table" class="bordered highlight centered"> 
    <thead> 
     <tr> 
     {{#headers}} 
     <th>{{this}}</th> 
     {{/headers}} 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     {{#each tableContent}} 
     {{#each headers}} 
     <td>{{lookup ../contentName headers}}</td> 
     {{/each}} 
     {{/each}} 
     </tr> 
    </tbody> 
    </table> 
</script> 

私は単に<td> contentName.name </td>を行うというように、ユーザーが自分を作成できることであることができない理由データベース内に独自の列があるので、事前にプロパティ名を知る方法がありません。

Answer 1

あなたのオブジェクトにlittle modificationがある場合、ember-contextual-tableでそれを行うことができます。

こちらはthe twiddleです。

サンプルコード：

{{#data-table data=data.tableContent as |t|}} 
    {{#each data.headers as |columnName|}} 
    {{t.column propertyName=columnName name=columnName}} 
    {{/each}} 
{{/data-table}} 

が

を更新しました。しかし、あなたがあなたのコードの実行を作りたい場合は、ここにある：

<table class="bordered highlight centered"> 
    <thead> 
     <tr> 
     {{#each data.headers as |header|}} 
     <th>{{header}}</th> 
     {{/each}} 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     {{#each data.tableContent as |c|}} 
      {{#each data.headers as |h|}} 
      <td>{{get c h}}</td> 
      {{/each}} 
     {{/each}} 
     </tr> 
    </tbody> 
    </table> 

はthis twiddle