Question

我正在尝试在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();
    }
});

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

问题原因是由于我在分配这个时已经分配了这个。$ 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

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

Backbone.js和JQueryUI Dialog - 事件没有绑定

3 个答案: