$（this.el）和this之间的区别Backbone中的$ el

我正在开发一个使用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); 
    } 
});

来源

2013-07-13 MegaWubs

你能告诉其中Dash.Views.Dashboard元素被设置代码？ –

添加完整视图 – MegaWubs

我猜想，你的问题就在这里：

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 
}

来源

2013-07-13 17:15:44

非常感谢！这工作:)感谢您的帮助和解释！ – MegaWubs

$（this.el）和this之间的区别Backbone中的$ el

回答

相关问题