javascript - 如何在 Backbone 模型中放置按钮？

Question

我有一个主干模型，它代表一个表。它有一个 headers 方法和一个 rows 方法，handbars 模板使用它来在 View 中制作表格。

每行中的一列将有一堆按钮，需要调用 javascript。我知道 View 中的事件，但我不确定如何连接它们...

目前，我有:

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在模型中，这也很有用!

Answer 1

有两种方法可以解决这个问题:

快

1. 使用event.currentTarget获取对单击时绑定(bind)的 DOM 对象的引用:

   class App.Views.TableElement extends Backbone.View
     events:
       "click .clickme": "click"
   
     click: (event) =>
       var row = $(event.currentTarget).closest('tr');
   

语义

Backbone.Marionette 方式:只需

将模板拆分为容器 View

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

另一个 subview ，带有模板

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

该 View 各获取一行数据(可以映射到一个模型)。在 subview 中，您将设置一个单击处理程序来处理您的单击逻辑。您在容器 View 的 render 内渲染 subview 。函数并附加到 <tbody>当你渲染它们时。