2016-08-26 9 views
0

[OK]を、私はEmberJSの表にカンマ区切りリストを表示するにはどうすればいいですか?

として表示することがenter image description here

として表示されている現在では配列[ "1、ジョン"、 "2、ジェーン"、 "3、ザック"]

を持っています

enter image description hereどのようにこの

私のコード

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script> 
     <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"></script> 
     <script src="http://builds.emberjs.com/tags/v1.10.0-beta.3/ember-template-compiler.js"></script> 
     <script src="http://builds.emberjs.com/release/ember.debug.js"></script> 
     <script src="http://builds.emberjs.com/beta/ember-data.js"></script> 
    </head> 
    <body> 

     <script type="text/x-handlebars"> 
     {{outlet}} 
     </script> 


     <script type="text/x-handlebars" data-template-name="index"> 

     <table>  
      <tr> 
       <th>Id</th> 
       <th>Name</th> 
      </tr> 
      <tr> 
       {{#each value in App.testData}} 
       <td>{{value}}</td> 
      {{/each}} 
      </tr> 
     </table> 

     </script> 

     <script type="text/javascript"> 
     var App = Ember.Application.create()   
     var someArray = [ { 
         'id':1, 
         'name':'john' 
        },{ 
         'id':2, 
         'name':'jane' 
        },{ 
         'id':3, 
         'name':'zack' 
        }]; 

     App.testData = someArray.map(function(el) 
        { 
         return el.id + ',' + el.name; 
        }); 
     </script> 
    </body> 
</html> 
へ0
+0

あなたはエンバーの、このような古いバージョンを使っている何らかの理由内側に今のApp にそれをsomeArrayに変換して設定する必要がありますか?これが新しいプロジェクトの場合は、新しいEmber 2.x/Ember-CLI環境とレイアウトをシミュレートするember twiddle(https://ember-twiddle.com)でのアップグレードと、問題の再作成を強くお勧めします。 ..あなたはおそらくもっと良い応答を得るでしょう。一般的に、あなたはそれのようなグローバルなApp変数に嫌なことは望んでおらず、それはおそらくあなたの問題です....あなたのテンプレートは、それが自動的に生成されたコントローラ/ビューに定義された値を取得しています。 –

答えて

1

利用someArrayの代わりに、testArray、あなたが持っている場合にtestArrayをデフォルトあなたのアプリあなたはeachハンドル使用value.idvalue.name

 <!DOCTYPE html> 
    <html> 
    <head> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script> 
     <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"></script> 
     <script src="http://builds.emberjs.com/tags/v1.10.0-beta.3/ember-template-compiler.js"></script> 
     <script src="http://builds.emberjs.com/release/ember.debug.js"></script> 
     <script src="http://builds.emberjs.com/beta/ember-data.js"></script> 
    </head> 
    <body> 

     <script type="text/x-handlebars"> 
      {{outlet}} 
     </script> 


     <script type="text/x-handlebars" data-template-name="index"> 

     <table>  
       <tr> 
        <th>Id</th> 
        <th>Name</th> 
       </tr> 
       <tr> 
        {{#each value in App.someArray}} 
        <td>{{value.id}}</td> 
     <td>{{value.name}}</td> 
       {{/each}} 
       </tr> 
     </table> 

     </script> 

     <script type="text/javascript"> 
      var App = Ember.Application.create()  
      var testData = [ "1,john", "2,jane", "3,zack" ]; 
      App.someArray = testData.map(function(e){ 
          var [id,name] = e.split(","); 
          return { 
           id:id, 
           name:name 
          } 
          }) 
     </script> 
    </body> 
    </html> 
+0

私はもう1つの質問があります(あなたが助けてください)http://stackoverflow.com/questions/39176957/array-values-are-not-リフレクション・イン・イン・アンババント –

1

これはhtmlタグを追加して次の行に折り返すだけで簡単に行えます。また、3つの中括弧でバープロパティを処理して、ハンドルバーが文字列だけでなくhtmlタグも渡していないことを確認するようにしてください。私がテストしていないが、私はあなたが画像を取得します願っています.....あなたがより深く詳細についてhandlebars expressionsに、このチュートリアルをチェックしていることを確認してください...

<script type="text/x-handlebars" data-template-name="index"> 

     <table> 
     <thead>  
      <tr> 
       <th>Id</th> 
       <th>Name</th> 
      </tr> 
     </thread> 
     <tbody> 
      <tr> 
       {{#each value in App.testData}} 
       <tr>{{{value}}}</tr> 
       {{/each}} 
      </tr> 
     </tbody> 
     </table> 
     </script> 

     <script type="text/javascript"> 
     var App = Ember.Application.create()   
     var someArray = [ { 
         'id':1, 
         'name':'john' 
        },{ 
         'id':2, 
         'name':'jane' 
        },{ 
         'id':3, 
         'name':'zack' 
        }]; 

     App.testData = someArray.map(function(el) 
        { 
      return '<td>' + el.id + '</td>' + ',' + '<td>' + el.name + '</td>'; 
        }); 
     </script> 
+0

ちょうど私の答えを変更し、私も同様にテストした、あなたのために働く場合私に知らせてください –

関連する問題