Javascript 对下划线模板中的对象调用函数

我在模板的HTML中有一个按钮。如何使它调用当时渲染的对象上的函数

我意识到，

这个

指的是当时的按钮。但是我怎么称呼这个人呢

模板

<script type="text/template" id="tpl-person">
    <tr>
        //...
        <td><button onclick="this.happyBirthday()">Birthday</button></td>
    </tr>
</script>

为什么这行不通 这是不可能的，因为从HTML附加事件处理程序需要序列化处理程序函数（即以源代码形式）。在JavaScript中序列化一个函数是不可能的，即使可以，也有另一个showstopper：在函数

中，this

是对现有JavaScript对象的引用，这是不可能的，因为您所做的一切都需要序列化

我们可以做些什么 一个简单的解决方法是在呈现模板时使用jQuery附加事件处理程序

考虑到

this

的期望值，您可以在任何

Person

方法中定义事件处理程序函数，如下所示

// $.proxy because otherwise "this" would be the clicked button element
$.proxy(this.happyBirthday, this);

附加单击处理程序非常简单：

var clickHandler = $.proxy(this.happyBirthday, this);
var html = $(template(this));
$("#peopleWrapper").append(html.find("button").click(clickHandler).end());

更好的方法 这就是说，这看起来不是一个好的安排事情的方式。考虑一个不同的建议：将<代码>人<代码>对象附加到渲染模板（例如，通过jQuery的<代码>数据>代码>，并从单击处理程序中引用它。可以委托处理程序本身保存函数，并允许动态添加更多呈现的模板

例如：

HTML模板本身根本不附加任何处理程序

添加渲染模板时，使用

.data

将其与person对象关联，并从DOM角度将其标记为可见的person associated。这可以像添加

数据人

属性（或CSS类）一样简单：

将委托处理程序附加到DOM，该处理程序识别按钮上的单击，并从单击的元素开始查找关联的person对象，并调用

happyBirthday

方法：

$("#peopleWrapper").on("click", "[data-person] button", function() {
    $(this).closest("[data-person]").data("Person").happyBirthday();
});

---

感谢您的清晰解释！我本希望能有一个更干净的解决方案，比如主干网。将类添加到按钮和视图中的事件。我只是随便玩玩，寻找消除主干的方法，但这似乎是最干净的方法。

$("#peopleWrapper").append(
  $(template(this)).data("Person", this).attr("data-person", ""));

$("#peopleWrapper").on("click", "[data-person] button", function() {
    $(this).closest("[data-person]").data("Person").happyBirthday();
});