Backbone.js 和 JQueryUI 对话框 - 事件未绑定 [英] Backbone.js and JQueryUI Dialog - events not binding

问题描述

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

I'm trying to use Backbone.js to in a JQuery Dialog. I've managed to get the dialog to render and open, but it doesn't seem to be firing my events. I've added a test event to check this, and clicking it doesn't have the expected result.

我已尝试按照此的说明进行操作博文，关于delegateEvents，但没有什么区别.不会抛出任何错误，只是不会触发事件.这是为什么?

I've tried following the instructions on this blogpost, regarding delegateEvents, but nothing it made no difference. No errors are thrown, the events just don't fire. Why is this?

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

推荐答案

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

You might want to try this. I had to refactor your code a bit hope you will get the idea

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

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

Instantiate and render outside the View definition

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

这篇关于Backbone.js 和 JQueryUI 对话框 - 事件未绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！