Question

我有一个主干模型，它代表一个表。它具有一种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，那将非常有用好吧！

Answer 1

有两种方法可以解决此问题：

快速

使用event.currentTarget获取对单击时绑定的DOM对象的引用：

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

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

语义

Backbone.Marionette方式：仅需
即可将模板拆分为容器视图
```
<table>
  <tbody>
  </tbody>
</table>
```
和另一个带有模板的子视图
```
<tr>
  {{#each this}}
    <td>{{{this}}}</td>
  {{/each}}
</tr>
```
此视图分别获取一行数据（可以将其映射到一个模型）。在子视图中，您将设置一个单击处理程序来处理您的单击逻辑。您可以在容器视图的render函数中渲染子视图，并在渲染时附加到<tbody>。

如何在主干模型中放置按钮？

1 个答案:

快速

语义