骨幹：摧毀之前的路由器視圖和使用

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追加到同一個容器元素。