Backbone.js的和jQueryUI的对话框 - 事件不具约束力(Backbone.js an

我想在一个jQuery对话框使用Backbone.js的来。 我已经成功地获得对话框渲染和打开，但它似乎并没有成为我的射击事件。 我添加了一个测试事件来检查这一点，并单击它并没有预期的结果。

我试过下面这个指令博文 ，关于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();
    }
});

Answer 1:

你可能想试试这个。 我不得不重构你的代码一点希望你能得到的想法

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

Answer 2:

原来，这个问题是由于我分配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(); 
    }
});

Answer 3:

我对代码库，我能够通过分配对话框这个绑定事件一二代码库。在其他的代码库这有点不工作，但是$ EL。 我添加下面一行this.el = $这个埃尔。 对代码和它现在的工作。 但我仍然无法弄清楚，为什么它是在一个代码库工作，而不是其他，为什么分配$ E1至E11得到它的工作。

文章来源: Backbone.js and JQueryUI Dialog - events not binding