骨干：摧毁之前的路由器视图和使用

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. Router的用途是什么？在这种情况下，流量是否会流向路由器？

   答：骨干路由器收听网址的变化，但他们是适当的地方听取观看事件，所以如果你的观点作出了重要的变化，他们可以作出相应的反应。这是来自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中。
• 在仪表板路径中，您检查会话是否可用，并且只在内容存在的情况下才呈现，如果不是，则重定向至登录。

有很多关于用户认证的好文章，我指的是你this example。

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') 
        }); 

另外，如果你想更换你的loginView使用您的DashboardView，您需要.remove（）旧视图并将DashboardView追加到同一个容器元素。