模板上的Backbone.js事件

Question

我正在嘗試使用骨干事件將事件分配給按鈕：。 我試一試了所有的tuts是如何做到的，但到目前為止還沒有任何工作。 我懷疑是我無法添加事件，因為$ el的內容尚未更新（我加載了一個使用下划線的模板）。 所以我的問題是如何將事件分配給一開始沒有加載的類？

我的代碼在回購https://github.com/PITS/bluLime-CMS上的Github上

我正在處理的文件位於ui / scripts / views / UserPage.js下。

var UserView = Backbone.View.extend({
    initialize: function() {},
    render: function() {

        var data = {
        };
        var compiled = _.template(UserPage, data);

        $.when($('.main').html(compiled)).then(function() {
            this.$el = $(".userEdit");
            console.log(this.$el);
        });
    },
events: {
    "click .header button": "openPreview"
},
openPreview: function() {
    alert("HI");
}

模板位於ui / scripts / views / templates / UserPage.js中

<div class="userEdit">
 <div class="header">
    <h2>
        Edit Users
    </h2>
    <button>

    </button>
</div>
</div>

PS：我已經嘗試解決問題，但我失敗了

Answer 1

更改后，您的活動不會被委托給正確的元素this.$el 。 而不是直接設置this.$el ，而是使用View.setElement 。 它將為您處理事件重新授權。

此外，您需要創建一個view變量來保持this的引用，因為then回調內的上下文不再是視圖。

您的渲染功能應如下所示：

render: function() {

    var data = {
    };
    var compiled = _.template(UserPage, data);
    var view = this;

    $.when($('.main').html(compiled)).then(function() {
        view.setElement($(".userEdit"));
        console.log(view.$el);
    });
}