Как поместить кнопку в базовую модель? - PullRequest
Новая
       37

Как поместить кнопку в базовую модель?

0 голосов
/ 30 августа 2018

У меня есть модель магистрали, которая представляет собой таблицу. У него есть метод headers и метод rows, и он используется шаблоном руля для создания таблицы в представлении.

Один из столбцов в каждой строке будет иметь несколько кнопок, которые должны вызывать javascript. Я знаю о событиях в представлении, но я не уверен, как их связать ...

В настоящее время у меня есть: 

class App.Table extends Backbone.Model

[BLAH BLAH]
  columns: =>
    columns = []
    [BLAH BLAH]
    Array::push.apply columns, [['<input id="clickMe" type="button" value="clickme" onclick=";" />', 5, 5]]    if @get('haveDataBytes')
    columns


class App.Views.TableElement extends Backbone.View
      events:
        "click .clickme": "click"

      click: (event) =>
        console.log("foo")  

      render: =>
        console.log @model.toJSON()
        @$el.empty().append(HandlebarsTemplates['shared/table_element'](@model.toJSON(), data: { tableClass: @tableClass() }))
        @$el.find('.cohort_toggle select').val(@model.get("selectedCohortLabel"))
        @$el

Но так как у каждой строки будет свой "clickme", я не уверен, как определить, что было нажато.

Соответствующая часть файла hbs: 

  <tbody>
    {{#each rows}}
    <tr>
      {{#each this}}
      <td>{{{this}}}</td>
      {{/each}}
    </tr>
    {{/each}}
  </tbody>

{{{this}}} в три раза, так что я могу включить HTML ... Если есть лучший способ сделать ТО и сделать его похожим на кнопку без необработанного HTML в модели, это также будет полезно!

1 Ответ

0 голосов
/ 02 сентября 2018

Есть два способа справиться с этим:

Quick

  1. Используйте event.currentTarget, чтобы получить ссылку на объект DOM, связанный с кликом: 

    class App.Views.TableElement extends Backbone.View
  events:
    "click .clickme": "click"

  click: (event) =>
    var row = $(event.currentTarget).closest('tr');

Семантический

  1. Способ Backbone.Marionette: разделите ваш шаблон на представление «Контейнер» с помощью 

    <table>
  <tbody>
  </tbody>
</table>

    и еще один, детский вид, с шаблоном 

    <tr>
  {{#each this}}
    <td>{{{this}}}</td>
  {{/each}}
</tr>

    Это представление занимает одну строку данных (которая может быть сопоставлена ​​с одной моделью) каждая. Внутри дочернего представления вы бы настроили обработчик кликов для обработки логики кликов. Вы визуализируете свои дочерние представления в функции render Контейнерного представления и добавляете к <tbody> по мере их отображения.

...