0

我在 Backbone 中有两个视图。注册视图和登录视图。

登录视图

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() 函数。因此，当我在浏览器中打开页面并获取登录视图并想要提交表单时，有两个请求，因为来自两个视图的事件都是委托的。我可以在构造函数中阻止 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 的评论，不要在其中声明 views 元素。

于 2013-10-31T15:59:32.433 回答