嵌套骨干视图仅渲染一次

Question

我在一个小网页应用程序中使用骨干我正在开发以获得一些乐趣，但我对我遇到的Backbone Views问题感到难过。

当我将嵌套视图加载到动态视图中时，嵌套视图将仅在第一次导航到时加载，并且我再次加载该视图的所有尝试都失败了。

可以在以下链接中找到此示例。使用左侧的按钮导航至#profile后，点击Show Details按钮将导航至#profile/view。这会将嵌套视图渲染到屏幕上。但是，在任何路径组合中导航和返回会导致嵌套视图不再继续渲染。

以下是实时代码的链接：http://onbb.co/app/#dashboard

我已经构建了两个名为mountView()和unMountView()的方法，它们负责渲染和清理视图。 这些可以在client/js/packages/router/route.js from line 68 onwards中找到。

我正在为应用的初始化加载根视图 这可以在client/js/init.js on line 100中看到，我在其中调用rootRoute.mountView()。

所有其他后续视图都在handleRoute()上的line 8 of client/js/packages/router/router.js方法中动态加载。

以下是handleRoute()方法的源代码。

/**
* handleRoute - takes the current hash string and determines which route(s) to load
*
* @ param string splat - the current hash string
*/

var handleRoute = function(splat) {
    var self = this;
    self._requestedRouteString = splat;
    self._currentRouteString = self.getCurrentStack().join('/');

    //Check that the requested hash string is different from the current route
    if(self._requestedRouteString !== self._currentRouteString) {

        //Break down the hash string into an array
        var parts = self._requestedRouteString.split('/');
        log('Route Stack Requested:', parts);

        //If there is a current route...
        if(self.getCurrentStack()) {
            //Reverse the array elements
            var routeStack = self.getCurrentStack().reverse();

            //For each section of the current route stack
            for(var j = 0; j < routeStack.length; j++) {
                log('Unmounting route:', routeStack[j].getId());

                //Unmount the view associated with the route
                routeStack[j].unMountView();
            }

            //Now that the current views have all been unmounted, clear the current route stack array.
            self._currentRouteStack = [];
        }

        //As the rootRoute is already loaded elsewhere, declare it as the first element of the array
        var requestedRoutes = ['rootRoute'],
            routeModule = '';

        //for each of the routes requested
        for (var i = 0; i < parts.length; i++) {

            //Format the module name from the hash string to camel case.
            if(i > 0) {
                routeModule += '-';
            }
            routeModule += parts[i];

            var camelCase = routeModule.toLowerCase().replace(/-(.)/g, function(match, group1) {
                return group1.toUpperCase();
            });

            //Add the string of the route's module name to the requestedRoutes array
            requestedRoutes.push(camelCase + 'Route');
        }

        //for each of the modules declared.
        for(var k = 0; k < requestedRoutes.length; k++) {

            var routes = [],
                iteration = 0;

            //Load the route module using RequireJS
            require([
                requestedRoutes[k]
            ], function(route) {

                //Build up an array of the Route objects
                routes.push(route);

                if(routes.length > 1) {

                    var parent = routes[iteration-1],
                        child = routes[iteration];

                    //for each of the children declared in the parent route...
                    for(var l = 0; l < parent.getChildren().length; l++) {

                        //Check if the child route module matches the permitted modules allowed by the parent 
                        if(child.getId() == parent.getChildren()[l]) {
                            log('Mounting route:', child.getId());

                            //mount the child view to the parent view
                            child.mountView();
                            //Add the child route to the self._currentRouteStack variable, for the next request.
                            self.addViewToStack(child);
                            break;
                        }
                    }
                }
                iteration++;
            });
        }
    } else {

        log('Requested Route was identical to Current Route.');
    }
};