骨干：销毁路由器的先前视图和使用

Question

这是一个登录流程，用户在其中提供登录详细信息并从服务器获取响应。
在这里，我无法弄清楚应该在哪里删除以前的视图？ dashboard View是否需要了解LoginView 。
Router什么用？ 在这种情况下，流是否曾经流向路由器？
两种观点

var LoginView = Backbone.View.extend({
    url: 'http://localhost:3000/login',
    template:_.template('<div class="form-signin">'+
                        '<h2 class="form-signin-heading">Please sign in</h2>'+
                        '<input type="text" id="email" class="form-control" placeholder="Email address" required="" autofocus="">'+
                        '<input type="password" id="password" class="form-control" placeholder="Password" required="">'+
                        '<button id="loginBtn" href="#login" class="btn btn-lg btn-primary btn-block" >Sign in</button>'+
                        '</div>'),
    events: {
        "click #loginBtn":"login"
    },
    initialize: function() {
        this.model.on('change', this.render, this); 
    },
    render: function() {
        var attributes = this.model.toJSON();
        this.$el.html(this.template(attributes));
    },
    login: function() {
      console.log('view signIn');
      this.model.set({
        "email": $('#email').val(),
        "password": $('#password').val()
      });
      this.model.login();
    }
});

var DashboardView = Backbone.View.extend({
    template:_.template('<div>'+
                        '<h3><%= campaignName %></h3>'+
                        '<span><%= orderedAndGoal %>, </span>'+
                        '<span><%= status %>, </span>'+
                        '<span><%= endDate %>, </span>'+
                        '</div>'),
    initialize: function() {
        this.model.on('change', this.render, this); 
    },
    render: function() {
        console.log('what happens here')
        var attributes = this.model.toJSON();
        this.$el.html(this.template(attributes));
            this.$el.appendTo('.container');
    },
});
var dashboardView = new DashboardView({model: dashboardModel});

两种型号

var LoginModel = Backbone.Model.extend({
    url:'http://localhost:3000/login',

    defaults: {
        email:"",
        password:""
    },
    parse: function(resp) {
        console.log('Model: Got the response back');
        return resp;
    },
    login: function() {
        console.log('Model: Login function:'+JSON.stringify(this));
        this.save(
            {}, {
                success: function(resp) {
                    console.log('success'+JSON.stringify(resp.get("0")));
                    dashboardModel.set(resp.get("0"));
                    //window.location = 'templates/dashboard.html'
                },
                error: function(error) {
                    console.log('error: '+JSON.stringify(error));
                }
            });
    },
    redirect: function() {
        console.log('inside redirect method');
    }
});
var loginModel = new LoginModel();

var DashboardModel = Backbone.Model.extend({
    defaults: {
        campaignName:"",
        orderedAndGoal:"",
        status:"",
        endDate:"",
        orderPlace:"",
        tShirtOrdered:"",
        tippingPoint:"",
        getPaid:""
    },
    parse: function(resp) {
        console.log('Model: Got the response back');
        return resp;
    }
});
var dashboardModel = new DashboardModel();

当LoginModel.save()从服务器获取值并将其设置为DashboardModel 。 DashboardView侦听模型更改。 然后，它调用render() 。 这一切都说得通。 但是那之后该去哪里呢？ 将DashboardView.el附加到其render()父标记中是一个好主意吗？ 这里有Router用途吗？
应用程序的路由器如下所示：

var Router = new (Backbone.Router.extend({
    routes: {
        "":"home",
        "login":"login"
    },
    start: function() {
        Backbone.history.start({pushState:true});
    },
    home: function() {
        var loginView = new LoginView({model: loginModel});
        loginView.render();
        $(".container").append(loginView.el);
    }, 
    login: function() {
        var loginModel = new LoginModel();
        var loginView = new LoginView({model: loginModel});
        loginModel.fetch();     
    }
}));

new Router.start();

Answer 1

你的问题

1. 在这里，我无法弄清楚应该在哪里删除以前的视图？

   答：可以在DOM中替换或附加视图，这取决于应用程序的需求。

2. 仪表板视图是否需要了解LoginView？

   答：视图不需要了解其他视图。 将此职责传递给路由器/控制器或将数据保存在两个视图可以共享的通用模型中。

3. 路由器的用途是什么？ 在这种情况下，流是否曾经流向路由器？

   答：骨干路由器会监听url的更改，但是它们是监听视图事件的合适位置，因此，如果您的视图进行了重要的更改，它们可以做出相应的反应。 这来自Backbone文档：

   Backbone.Router提供了路由客户端页面并将其连接到动作和事件的方法。

你的例子

在提供两个路由的代码中，创建一个登录视图：

home: function() {
    var loginView = new LoginView({model: loginModel});
    loginView.render();
    $(".container").append(loginView.el);
},
login: function() {
    var loginModel = new LoginModel();
    var loginView = new LoginView({model: loginModel});
    loginModel.fetch();
}

您可以做的是为登录设置一条路径，为仪表板设置一条路径：

• 登录路径 ，创建视图，登录成功后将会话保存在cookie中。
• 在仪表板路由中，您将检查会话是否可用，并且仅在内容存在的情况下呈现内容，否则将您重定向到登录。

有很多关于用户身份验证的好文章，我为您指出了这个示例 。

Answer 2

您可以将视图附加到DOM中的元素。 您可以在渲染后执行以下操作：

render: function() {
    console.log('what happens here')
    var attributes = this.model.toJSON();
    this.$el.html(this.template(attributes));
    this.$el.appendTo('#yourElement');
},

或者，可以设置为在创建视图时附加元素的视图：

var dashboardView = new DashboardView({
                        model: dashboardModel,
                        el: $('#yourElement')
                    });

另外，如果要用DashboardView替换loginView，则需要.remove（）旧视图，并将DashboardView附加到同一容器元素。