Backbone.js的和jQueryUI的对话框 - 事件不具约束力 [英] Backbone.js and JQueryUI Dialog - events not binding

问题描述

我想在一个jQuery的对话框使用Backbone.js的到。我设法对话框渲染和打开，但它似乎并没有被解雇我的事件。我添加了一个测试事件来检查，并单击它并没有预期的结果。

我试过下面就这个的说明博文，对于delegateEvents，但没有它并没有区别。不会引发任何错误，这些事件只是不火。这是为什么？

  Slx.Dialogs.NewBroadcastDialog.View = Backbone.View.extend（{
    事件：{
        点击.dialog内容：clickTest
    }，
    clickTest：功能（）{
        警报（点击）;
    }，
    渲染：功能（）{
        VAR compiledTemplate = Handlebars.compile（this.template）;
        变种renderedContent = compiledTemplate（）;        VAR的选择= {
            标题：Slx.User.Language.dialog_title_new_message，
            宽度：500
        };
        $（renderedContent）.dialog（选件）;
        this.el = $（＃newBroadCastContainer）;
        this.delegateEvents（this.events）;
        返回此;
    }，
    初始化：功能（）{
        _.bindAll（这一点，'渲染'）;
        。this.template = $（＃newBroadcastDialogTemplate）HTML（）;
        this.render（）;
    }
}）;
 

解决方案

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

  Slx.Dialogs.NewBroadcastDialog.View = Backbone.View.extend（{
    EL：＃newBroadCastContainer
    模板：$（＃newBroadcastDialogTemplate）HTML（）
    事件：{
        点击.dialog内容：clickTest
    }，
    clickTest：功能（）{
        警报（点击）;
    }，
    渲染：功能（）{
        VAR compiledTemplate = Handlebars.compile（this.template）;
        变种renderedContent = compiledTemplate（）;
        $（this.el）的.html（renderedContent）.hide（）对话框（this.options.dialogConfig）;
        返回此;
    }，
    初始化：功能（）{
    }
}）;
 

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

  VAR myDialog =新Slx.Dialogs.NewBroadcastDialog.View（{dialogConfig：{标题：Slx.User.Language.dialog_title_new_message，宽度：500}}）;
myDialog.render（）;
 

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.

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屋！