VPF::ember_js click event - Форум программистов

polin11

Дата 2.1.2017, 13:05 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 122
Регистрация: 6.6.2015

Репутация: нет
Всего: нет

Пытаюсь изучать фрэймворк 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+"'>&nbsp;&nbsp;&nbsp;</td>"
             html+="<tr/>"
       }
       html+="</table>";
       document.getElementById('target').innerHTML=html;
    },
    click: function() {  //обработка клика мыши в любой области, нужно только в таблице
        console.log('get click')
    },
});

Происходит рисование таблицы, нужно написать обработчик события нажатия по ячейке данной таблице, узнать id ячейки, как это сделать

_zorn_

Дата 10.1.2017, 18:48 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1077
Регистрация: 21.8.2007

Репутация: 1
Всего: 12

Эм, а вы точно правильно используете эмбер ?

Цитата

let html=" <table id='table' border=1px>"

Что это за ЕРЕСЬ ?
У эмбера прекрасная архитектура, не надо старые привычки пытаться засунуть в нее.
Для рендера есть handlebars - передавай туда. Там акшины и прочие прелести. Не хватает фунцикляра в шаблонах - пересмотри архитектуру.

Цитата

document.getElementById('target').innerHTML=html;

Это вообще дико для эмбера.

Давайте начнете с этого https://guides.emberjs.com/v2.10.0/template...dlebars-basics/

И потом вам не будет подобная вещь казаться чем то сверхестественным

Цитата

{{#each categories as |category|}}
<div class="OLOLO">{{category.title}}</div>
{{/each}}

PS. Да забыл сказать - свой "document.getElementById" вы должны будете сами обновлять и следить и т.п. А мою абракадабру эмбер сам обновит smile

Это сообщение отредактировал(а) _zorn_ - 10.1.2017, 21:27

_zorn_

Дата 10.1.2017, 21:40 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1077
Регистрация: 21.8.2007

Репутация: 1
Всего: 12

Да, забыл на вопрос топика ответить - хелпер action вас в помощь smile

polin11

Дата 12.2.2017, 10:24 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 122
Регистрация: 6.6.2015

Репутация: нет
Всего: нет

Спасибо за помощь, возник вопрос
Нужно нарисовать таблицу после того, как пользователь введет размер таблицы
Решил изменить шаблон 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);
         } 
      }
   },
)}

_zorn_

Дата 15.2.2017, 16:14 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1077
Регистрация: 21.8.2007

Репутация: 1
Всего: 12

Ну во первых вы наверное хотели написать

Цитата

for (let i = 0; i < this.cell.length; i++)

А во вторых неправильно построили структуру приложения.

Немного не понятна ваша задача (как строки со столбцами различать ?). Но например попробуйте вот такой код, может понятней станет

Код


{{yield}}
<strong>Enter number rows=</strong>
<input type="text" size='5' value={{numRows}}/>
<strong>Enter number cols=</strong>
<input type="text" size='5' value={{numCols}}/>
<br/>
<button {{action "clickButton"}}>CLick and get result</button>
<br/>
<br/>
<table border="1" class='square'>
{{#each tableRows as |singleRow|}}
<tr {{action 'clickRow' singleRow }} >
   {{#each singleRow as |singleCell|}}
    <td class='cell' {{action 'clickCell' singleCell}}>{{singleCell}}</td>
   {{/each}}
</tr>
{{/each}}
</table>

Код


import Ember from 'ember';
export default Ember.Component.extend({
    tableRows: function () {
      let rows = [];
      for(let i=0; i<this.get('numRows'); ++i) {
        let cols = [];
        for(let j=0; j<this.get('numCols'); ++j) {
            cols.push(Math.random());
        }
        rows.push(cols);
      }
      return rows;
    }.property('numRows,numCols'),
    actions:{
      //Все остальное сам
   },
)}

Возможно где то накосячил, но сам подход должен быть понятен. Забудьте про getElementById и прочие выборки элементов по селекторам.

ЗЫ: Из задуманного - 2 поля ввода и автоматически генерируемая таблица с рандомными значениями по изменению одного из полей.

Это сообщение отредактировал(а) _zorn_ - 15.2.2017, 19:36

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »