Backbone.js 和 JQueryUI 对话框 - 事件未绑定答案

【问题标题】：Backbone.js and JQueryUI Dialog - events not bindingBackbone.js 和 JQueryUI 对话框 - 事件未绑定
【发布时间】：2012-05-25 05:04:58
【问题描述】：

我正在尝试在 JQuery 对话框中使用 Backbone.js。我已经设法让对话框呈现和打开，但它似乎并没有触发我的事件。我添加了一个测试事件来检查这一点，单击它没有预期的结果。

我已经尝试按照blogpost 上的说明进行操作，关于delegateEvents，但没有任何区别。没有错误被抛出，事件只是不触发。这是为什么呢？

Slx.Dialogs.NewBroadcastDialog.View = Backbone.View.extend({
    events: {
        "click .dialog-content": "clickTest"
    },
    clickTest : function () {
        alert("click");
    },
    render: function () {
        var compiledTemplate = Handlebars.compile(this.template);
        var renderedContent = compiledTemplate();

        var options = {
            title: Slx.User.Language.dialog_title_new_message,
            width: 500
        };
        $(renderedContent).dialog(options);
        this.el = $("#newBroadCastContainer");
        this.delegateEvents(this.events);
        return this;
    },
    initialize: function () {
        _.bindAll(this, 'render');
        this.template = $("#newBroadcastDialogTemplate").html();
        this.render();
    }
});

【问题讨论】：

标签： backbone.js jquery-ui-dialog

【解决方案1】：

问题原来是由于我分配 this.el 而我应该分配 this.$el

效果很好：

Slx.Dialogs.NewBroadcastDialog.View = Backbone.View.extend({
    el: "#newBroadcastContainer",
    events: {
        "click .clicktest": "clickTest"
    },
    clickTest : function () {
        console.log("click");
    },
    render: function () {
        var compiledTemplate = Handlebars.compile(this.template);
        var renderedContent = compiledTemplate();

        var options = {
            title: Slx.User.Language.dialog_title_new_message,
            width: 500
        };

        this.$el = $(renderedContent).dialog(options);
        return this;
    },
    initialize: function () {
        _.bindAll(this, 'render');
        this.template = $("#newBroadcastDialogTemplate").html();
        this.render(); 
    }
});

【讨论】：

【解决方案2】：

您可能想试试这个。我不得不重构你的代码，希望你能明白

Slx.Dialogs.NewBroadcastDialog.View = Backbone.View.extend({
    el:"#newBroadCastContainer",
    template:$("#newBroadcastDialogTemplate").html(),
    events: {
        "click .dialog-content": "clickTest"
    },
    clickTest : function () {
        alert("click");
    },
    render: function () {
        var compiledTemplate = Handlebars.compile(this.template);
        var renderedContent = compiledTemplate();
        $(this.el).html(renderedContent).hide().dialog(this.options.dialogConfig);       
        return this;
    },
    initialize: function () {
    }
});

在视图定义之外实例化和渲染

var myDialog = new Slx.Dialogs.NewBroadcastDialog.View({dialogConfig:{title: Slx.User.Language.dialog_title_new_message,width: 500}});
myDialog.render();

【讨论】：

【解决方案3】：

我在其中一个代码库上有两个代码库，我可以通过将对话框分配给 this.$el 来绑定事件，但是在另一个代码库中，这不知何故不起作用。我添加以下行 this.el = this.$el; 到代码，它现在正在工作。但是我仍然无法弄清楚为什么它在一个代码库而不是另一个代码库中工作，以及为什么将 $el 分配给 el 让它工作。

【讨论】：