0

我正在使用 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);
    }
});
4

1 回答 1

4

我猜你的问题就在这里：

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

如果没有，.dashboard那么您直接分配给this.el，这是一个错误，因为它不会更新this.$el。结果是，this.el引用this.$el不同的东西，没有任何效果。您应该使用setElement来更改视图的el：

设置元素 view.setElement(element)

如果您想将 Backbone 视图应用到不同的 DOM 元素，请使用setElement，它还将创建缓存$el引用并将视图的委托事件从旧元素移动到新元素。

所以你应该这样说：

if(!$('.dashboard').length){
    $('body').append(this.el);
}
else{
    this.setElement($('.dashboard')); // <----- Use setElement
}
于 2013-07-13T17:15:44.497 回答