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

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

有兩種方法可以解決此問題：

快

1. 使用event.currentTarget獲取對單擊時綁定的DOM對象的引用：

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

語義

2. Backbone.Marionette方式：僅需將模板拆分為Container視圖

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

   另一個是子視圖，帶有模板

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

   該視圖每個都占用一行數據（可以將其映射到一個模型）。 在子視圖中，您將設置一個單擊處理程序來處理您的單擊邏輯。 您可以在Container視圖的render函數中渲染子視圖，並在render附加到<tbody> 。