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を割り当てたことが原因であることが判明しました。$ 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 に割り当てることでイベントをバインドできたコードベースの1つに2つのコードベースがありましたが、他のコードベースではこれが何らかの形で機能しませんでした。次の行を追加します this.el = this.$el; コードに追加し、現在動作しています。ただし、あるコードベースで機能し、他のコードベースでは機能しなかった理由と、 $el を el に割り当てると機能する理由をまだ理解できていません。

于 2013-01-06T11:13:41.227 に答える