$（this.el）和this之間的區別Backbone中的$ el

Question

我正在開發一個使用Backbone和Laravel的單頁Web應用程序。我已將路由器設置爲使用pushState，並將Laravel配置爲將所有其他請求發送到骨幹網應用的主視圖，其中骨幹網負責路由。

我的問題/問題如下：

我有一個名爲「儀表盤」的路線，這條路線是主要的應用程序視圖和登錄後顯示。它使用一個名爲Clients的集合。

dashboard:function(uri){ 
    dashboardCallback = function(data){ 
     if(data.check){ 
      console.log('generate dashboard'); 
      //get clients collection 
      clientsCollection = new Dash.Collections.Clients(); 
      clientsCollection.fetch().then(function(clients){ 
       //genenerate dashboard view 
       new Dash.Views.Dashboard({collection:clientsCollection}).renderDashboard(); 
      }); 
     } 
     else{ 
      router.navigate('/', {trigger:true, replace:true}); 
     } 
    } 

    Dash.Utilities.user.isLoggedIn(dashboardCallback); 
}, 

的Dash.Views.Dashboard視圖需要的應用程序中的所有視圖護理，調用renderDashboard（）時;方法，它開始渲染所有客戶端視圖。這是它變得有趣的地方。

渲染所有的客戶視圖的代碼如下：

renderClients:function(){ 
    console.log('Rendering all clients', this.collection); 
    clientsView = new Dash.Views.Clients({collection:this.collection}).render(); 
    $(this.el).html(clientsView.el); 
} 

與上面的代碼，它工作在所有情況下。我的意思是，當我首先登錄並且應用程序將我路由到儀表板視圖時，所有客戶端都被呈現並附加到DOM，當我立即訪問/dashboard（同時應用程序檢查我是否已登錄）時，會發生同樣的事情。 。

但是，當我使用以下代碼時，它不會在我第一次登錄時加載客戶端視圖。當我直接訪問/dashboard時，它會加載客戶端視圖。

renderClients:function(){ 
    console.log('Rendering all clients', this.collection); 
    clientsView = new Dash.Views.Clients({collection:this.collection}).render(); 
    this.$el.html(clientsView.el); 
} 

我花了一段時間才能找出這個問題的修復是，我曾與$(this.el)更換this.$el，但我送花兒給人的思想這並不重要，因爲它們在本質上是一樣的，還是我這個假設錯了嗎？

有人可以向我解釋這種奇怪的行爲嗎？

按照要求，這裏是我的全球儀表板視圖

Dash.Views.Dashboard = Backbone.View.extend({ 
    tagName:'div', 

    id:'main', 

    className:'dashboard', 

    initialize: function(){ 
     console.log('Initializing Global Dashboard View'); 
     //make sure the main element is only added once. 
     if(!$('.dashboard').length){ 
      $('body').append(this.el); 
     } 
     else{ 
      this.el = $('.dashboard'); 
     } 
    }, 

    renderDashboard: function(){ 
     console.log('Render all Dashboard components'); 
     this.renderNavBar(); 
     this.renderClients(); 
    }, 

    renderNavBar: function(){ 
     var navBarView = new Dash.Views.NavBar().render(); 
     $(this.el).before(navBarView.el); 
    }, 

    renderLogin: function(){ 
     var logInView = new Dash.Views.Login().render(); 
     $(this.el).html(logInView.el); 
    }, 

    renderWhoops:function(error){ 
     console.log('Render Whoops from Global Dashboard'); 
     var whoopsModel = new Dash.Models.Whoops(error); 
     $(this.el).html(new Dash.Views.Whoops({model:whoopsModel}).render().el) 
    }, 

    renderClients:function(){ 
     console.log('Rendering all clients', this.collection); 
     clientsView = new Dash.Views.Clients({collection:this.collection}).render(); 
     $(this.el).html(clientsView.el); 
    } 
}); 

Answer 1

我猜想，你的問題就在這裏：

if(!$('.dashboard').length){ 
    $('body').append(this.el); 
} 
else{ 
    this.el = $('.dashboard'); // <----- Broken 
} 

如果沒有.dashboard那麼你直接分配給this.el和這是一個錯誤，因爲它不會更新this.$el。結果是this.el和this.$el引用不同的東西，沒有任何作品。您應該使用setElement更改視圖的el：

setElementview.setElement(element)

如果你想申請一個骨幹視圖，以不同的DOM元素，使用setElement，這也將創造緩存$el引用並將視圖的委託事件從舊元素移動到新元素。

所以，你應該這樣說：

if(!$('.dashboard').length){ 
    $('body').append(this.el); 
} 
else{ 
    this.setElement($('.dashboard')); // <----- Use setElement 
}