0

Backbone には 2 つのビューがあります。登録ビューとログイン ビュー。

ログインビュー

define(['text!templates/login.html'], function(loginTemplate) {
var loginView = Backbone.View.extend({
    el: $('#content'),

    events: {
        "submit form": "login"
    },

    login: function(e) {
        e.preventDefault();
        $.post('/user/login', {
                email: $('input.login-email').val(),
                password: $('input.login-password').val()
            }, function(data) {
                console.log(data);
            }).error(function(){
                $("#error").text('Unable to login.');
                $("#error").slideDown();
            });
    },

    render: function() {
        this.$el.html(loginTemplate);
    }
});

return new loginView;
});

ビューを登録する

define(['text!templates/register.html'], function(registerTemplate) {
var registerView = Backbone.View.extend({
    el: $('#content'),

    events: {
        "submit form": "register"
    },

    register: function(e) {
        e.preventDefault();
        $.post('/user/register', {
            emailaddress: $("input.email").val(),
            password: $("input.password").val()
        }, function(data, textStatus, jqXHR) {
            console.log(data);
        });
    },

    render: function() {
        this.$el.html(registerTemplate);
        this.delegateEvents();
    }
});

return new registerView;
});

そして、別のイベントに切り替える前に、 currentView からのイベントの委任を解除します。しかし、バックボーン ビュー モデルは、そのコンストラクターで delegateEvent() 関数を呼び出します。そのため、ブラウザーでページを開いてログイン ビューを取得し、フォームを送信する場合、両方のビューからのイベントが委任されるため、2 つの要求があります。コンストラクターで delegateEvent 関数を防ぐことはできますか? IDを使用できることはわかっていますが、「混乱」は好きではありません。アクティブなビューからのイベントのみが必要です。

どうもありがとう。

編集：これが私のルーターです。おそらくそれが私の「バグ」の原因です。

define(['views/register', 'views/login'], function(RegisterView, LoginView) {
var TestRouter = Backbone.Router.extend({
    currentView: null,
    routes: {
        "login": "login",
        "register": "register"
    },

    changeView: function(view) {
        if ( this.currentView != null ) {
            this.currentView.undelegateEvents();
        }
        this.currentView = view;
        this.currentView.render();
    },

    login: function() {
        this.changeView(LoginView);
    },

    register: function() {
        this.changeView(RegisterView);
    }
});

return new TestRouter;
});
4

2 に答える 2

2

ここでの問題は、elプロパティを手動で宣言していることです ( el: $('#content'))。

きれいなコードでは、これを行いたくありません。代わりに、ルーターまたは親ビューでビューが動的に挿入される場所を管理する必要があります。そのようです：

var view = new registerView();
view.render().$el.appendTo("#content");

コードを保守しやすくし、ここで発生した問題に陥らないようにするには、レイアウトをビューから分離することが非常に重要です。

于 2013-10-31T14:21:51.127 に答える
0

私の問題の解決策は次のとおりです。

依存関係ごとにそれらを注入するときにすべてのビューを構築しない場合、それらは構築されず、イベントを委任しませんでした。

変化する

return new registerView;

に

return registerView;

あなたの見解で。Simon Boudrias のコメントに注意し、ビュー要素を宣言しないでください。

于 2013-10-31T15:59:32.433 に答える