2016-11-01 12 views
0

ランダムなテーブルデータを作成したいが、セルだけがランダムに常に繰り返されるようにする。ここに私のコードは次のとおりです。Ember.Jsでランダムなデータを持つテーブルを作成する方法

コンポーネント/燃えさし-app..js

import Ember from 'ember'; 

export default Ember.Component.extend({ 
    willRender: function() { 
    var tableRows = []; 
    var value = ['|', '-']; 
    var numRows = 20; 
    var numCells = 20; 
    for (var row = 1; row <= numRows; row++) { 
     for (var cell = 1; cell <= numCells; cell++) { 
     tableRows[row] = value[Math.round(Math.random())]; 
     } 
    } 

    this.set('rows', { 
     'tableRows': tableRows, 
    }); 

    } 
}); 

とテンプレート/コンポーネント/燃えさし-app.hbs

<table> 
{{#each-in rows as |table tableRow|}} 
{{#each tableRow}} 
    <tr> 
     {{#each tableRow as |tableRows|}} 
     <td><button id="button_id"{{action "changeValue"}} value="{{tableRows}}">{{tableRows}}</button></td> 
     {{/each}} 
    </tr> 
    {{/each}} 
    {{/each-in}} 
</table> 
+0

このパスは 'templates/ember-app.hbs'は正しいですか?私は 'templates/components/ember-app.hbs'と考えています。 initフックを使用してデータを初期化することができます。あなたの質問は何ですか?あなたのコードは動作していませんか? – kumkanillam

+0

私はすでにパッチを修正しています。いいえ、私のコードは動作していますが、データはセル内の行だけでランダムではありません – Erik

答えて

0

あなたはそれぞれに異なるセル値を作成していません行、

Component.js

export default Ember.Component.extend({ 
    willRender: function() { 
    var tableRows = []; 
    var value = ['|', '-']; 
    var numRows = 20; 
    var numCells = 20; 
    for (var row = 1; row <= numRows; row++) { 
     var cellArr = [] 
     for (var cell = 1; cell <= numCells; cell++) { 
     console.log('Math.round(Math.random()) ',Math.round(Math.random())); 
     cellArr[cell] = value[Math.round(Math.random())]; 
     } 
     tableRows[row]=cellArr; 
    } 

    this.set('rows', { 
     'tableRows': tableRows, 
    }); 

    } 
}); 
コンポーネントのHBSで

<table> 
{{#each-in rows as |table tableRow|}} 
{{log 'tableRow ' tableRow ' table ' table}} 
{{#each tableRow as |singleRow|}} 
    <tr> 
     {{#each singleRow as |tableRows|}} 
     <td><button id="button_id"{{action "changeValue"}} value="{{tableRows}}">{{tableRows}}</button></td> 
     {{/each}} 
    </tr> 
    {{/each}} 
    {{/each-in}} 
</table> 
{{yield}} 

私は、あなたが考える示唆Ember.Objectinitデータを初期化フックを使用します。 ember-twiddle

+0

ありがとうございました – Erik

+0

別のリクエストすべてのセルが同じ警告( "smth")であるかどうかを確認したいです。どうすればいいのですか?私はデータを変更する関数を書いた:ここはコードだ。 – Erik

+0

'アクション:{ changeValue:function(){ this。$()。( 'クリック'、 'セル値'、関数(イベント){ if($(this).text()== '| '){ $(this).text(' - '); } else($(this).text()==' - '){ $(this).text(' | '); } else { } }); } } ' – Erik

関連する問題