Javascript 主干网：破坏路由器以前的视图和使用

这是一个登录流，用户在其中提供登录详细信息并从服务器返回响应
在这里，我不知道我应该在哪里删除以前的视图？

dashboard View

是否需要了解

LoginView

路由器的用途是什么？在这种情况下，流量是否会到达路由器？

两种视图

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
时<代码>仪表板视图

侦听模型中的更改。然后调用

render（）

。这一切都有道理。但接下来该去哪里呢？ 将

DashboardView.el

附加到它的

render（）

中的父标记是一个好主意吗？ 这里是否使用了

路由器

？
应用程序的路由器如下所示：

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();

---

可以将视图附加到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')
                    });

此外，如果要用仪表板视图替换loginView，则需要删除（）旧视图并将仪表板视图附加到同一容器元素。

您的问题

在这里，我不知道我应该在哪里删除以前的视图

A:视图可以替换或追加到DOM中，这取决于应用程序的需要

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

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

路由器的用途是什么？在这种情况下，流量是否会到达路由器

A:主干路由器侦听url更改，但它们是侦听视图事件的适当位置，因此如果您的视图做出重要更改，它们可以相应地作出反应。这来自主干文档：

主干网。路由器提供了路由客户端页面并将其连接到操作和事件的方法

你的榜样 在您提供的两个路由的代码中创建登录视图：

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中
• 在仪表板路由中，检查会话是否可用，并且仅在内容存在时呈现内容，否则重定向到登录

---

有很多关于用户身份验证的好文章，我指给你看。

这不是我想要的。我将在哪里删除第一个视图？路由器在这里有什么用？