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, время: 06:01. |