ember_js click event
Пытаюсь изучать фрэймворк ember.js. После создания нового приложения добавляю компонент game-line.
В шаблон Application.hbs добавляем{{game-line}}. Шаблон game-line.hbs состоит <div id='target'></div> game-line.js состоит
import Ember from 'ember';
export default Ember.Component.extend({
cell:9,
didInsertElement: function(){
this.drawTable();
this.putCircles();
},
drawTable: function(){
let html=" <table id='table' border=1px>"
for(let i=0;i<this.get('cell');i++)
{
for(let j=0;j<this.get('cell');j++)
html+="<td id='_"+i+'^'+j+"'> </td>"
html+="<tr/>"
}
html+="</table>";
document.getElementById('target').innerHTML=html;
},
click: function() { //обработка клика мыши в любой области, нужно только в таблице
console.log('get click')
},
});
Происходит рисование таблицы, нужно написать обработчик события нажатия по ячейке данной таблице, узнать id ячейки, как это сделать |
На didInsert повесь событие и хендли его или в click по условию проверяй то, что тебе нужно
|
Спасибо за помощь, возник вопрос
Нужно нарисовать таблицу после того, как пользователь введет размер таблицы Решил изменить шаблон game-line.hbs состоит
{{yield}}
<strong>Enter number cells=</strong><input type="text" id='get_cells' size='5' value="9" id='get_cells'>
<br/>
<button {{action "click_button"}}>CLick and get result</button>
<br/>
<br/>
<table border="1" class='square'>
{{#each tableRows as |singleRow|}}
<tr {{action 'clickHandler' singleRow }} >
{{#each tableCols as |singleCol|}}
<td class='cell' {{action 'clickHandler' singleCol }} id='{{singleRow}}{{singleCol}}' >
</td>
{{/each}}
</tr>
{{/each}}
</table>
game-line.js состоит
import Ember from 'ember';
export default Ember.Component.extend({
//tableRows:[0,1,2, 3, 4,5,6,7,8],
//tableCols:[0,1,2, 3, 4,5,6,7,8],
tableCols:[],
tableRows:[],
actions:{
click_button()
{
this.cell=parseInt(get_cells.value);
for (let i = 0; i < this.cell; i++)
{
this.tableRows.push(i);
this.tableCols.push(i);
}
}
},
)}
|
| Часовой пояс GMT +3, время: 21:34. |