1

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

3 回答 3

4

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

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();
于 2012-05-17T17:13:50.307 回答
2

问题原来是由于我分配 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(); 
    }
});
于 2012-05-17T17:07:06.300 回答
0

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

于 2013-01-06T11:13:41.227 回答