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

Posted 2021-05-05

我有一个骨干模型，代表一个表。它有一个headers方法和一个rowsmethod，它由一个把手模板用于在视图中制作表格。

每行中的一列将有一堆按钮，需要调用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，这也是有用的！

答案

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

Quick

1. 使用event.currentTarget获取对单击时绑定的DOM对象的引用： class App.Views.TableElement extends Backbone.View events: "click .clickme": "click" click: (event) => var row = $(event.currentTarget).closest('tr');

Semantic

2. Backbone.Marionette方式：使用just将模板拆分为Container视图 <table> <tbody> </tbody> </table> 和另一个，儿童视图，与模板 <tr> {{#each this}} <td>{{{this}}}</td> {{/each}} </tr> 该视图每行占用一行数据（可以映射到一个模型）。在子视图中，您将设置一个单击处理程序来处理您的单击逻辑。您在Container视图的render函数中渲染子视图，并在渲染时附加到<tbody>。