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

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

我试着按照关于委派事件的说明进行操作，但没有任何效果。不会抛出错误，事件不会触发。为什么会这样

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();
    }
});

---

这个问题原来是由于我分配了this.el，而我本应该分配这个。$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(); 
    }
});

---

这个问题原来是由于我分配了this.el，而我本应该分配这个。$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(); 
    }
});

---

你可能想试试这个。我不得不重构你的代码，希望你能理解

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();

---

你可能想试试这个。我不得不重构你的代码，希望你能理解

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();

---

我在其中一个代码库上有两个代码库，我可以通过将对话框分配给它来绑定事件。$el但是在另一个代码库中，这不知何故不起作用。我添加以下行this.el=this.$el；

---

到代码，它现在正在工作。然而，我仍然无法理解为什么它在一个代码库中工作，而在另一个代码库中不工作，以及为什么将$el分配给el使它工作

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