父路由器激活功能在每次导航到其子路由时运行

Parent router activate function runs every time its child route is navigated to?

本文关键字:路由 运行 导航 激活 路由器 功能      更新时间:2023-09-26

这可能是代码结构的问题,而不是框架的问题。

基本上我想知道每次导航到父路由器的子路由之一时是否应该调用父路由器上的激活功能?

我的目标:有一个返回子路由器的模块,这是父路由器。如果用户正在添加新内容,则此父路由器负责创建对象,或者如果用户选择已存在的内容,则从服务器检索数据。子路由模块只是获取通过父路由器模块创建或检索的对象,并提供表单输入来操作该对象(通过 ko 数据绑定)。我遇到的问题是每次导航到子路由时都会调用父路由器的激活功能,这是创建/检索逻辑所在的位置,并导致再次检索对象,从而导致任何数据操作被覆盖。

下面是一些代码,希望能更好地说明:

// ParentRouter
define([...], function(...) {
    var selectedObj = ko.observable(null),
        configRouter = router.createChildRouter()
            .makeRelative({
               moduleId: 'viewmodels',
               fromParent: true,
               dynamicHash: ':id'
            }).map([
                {
                    route: ['Settings 1', ''],
                    moduleId: 'SettingsOne',
                    nav: true
                },
                {
                    route: 'Settings 2',
                    moduleId: 'SettingsTwo',
                    nav: true
                },
                {
                    route: 'Settings 3',
                    moduleId: 'SettingsThree',
                    nav: true
                }
            ]).buildNavigationModel();
    function getSelectedObj() {
        return selectedObj;
    }
    return {
        router: configRouter,
        obj: selectedObj, // privileged property which is accessed by other modules via the getSelectedObj method, this prop gets set in the activate function depending on the param
        getSelectedObj: getSelectedObj, // method which returns the current selected obj
        activate: function (objId) {
            if (objId == 'New') {
                 // create a new object with default props
            } else {
                // retrieve the data for the selected obj from API via the 'objId' param
            }
        }
    }
});

// SettingsOne module - child route module
define(['viewmodels/parentRouter'], function(parentRouter) {
    // this module simply gets a property from the parent routers module and binds it to form inputs in its View (which update automatically) so the user can edit information on that obj

    var obj = parentRouter.getSelectedObj(); // get the current selected obj via parent routers module method
    return {
        obj: obj
    }
});

Below is the shell module of my app, showing the main application router. 
// Shell.js
define([
    'plugins/router'
], function (router) {
    var routes = [
            {
                route: '',
                moduleId: 'viewmodels/home'
            },
            {
                route: ':id*configs',
                moduleId: 'viewmodels/parentRouter'
            }
        ];
    return {
        router: router,
        activate: function () {
            return router.map(routes)
                    .mapUnknownRoutes('viewmodels/notfound', 'not-found')
                    .activate();
        }
    }
});

我认为每次在激活孩子之前激活父母没有任何问题。如果不希望 rereval 再次发生,请将其设置为有条件的,例如:

define(function (require) {
    var
        $ = require('jquery'),
        Q = require('q'),
        activate = function () {
            return load();
        },
        loadPromise = null,
        load = function () {
            return loadPromise || (loadPromise = Q($.get('/my/api'))
                    .then(function (data) {
                        //use data;
                    }));
        };
        return {
           activate: activate
        }
});

我遇到了类似的问题,我不希望我的父虚拟机再次调用激活。 从杜兰达尔文档来看,听起来应该支持这一点:

从模块重用标题到这里

如果模块具有与之关联的子路由器。实例将被保留。

也就是说,我自己无法让它工作,但我认为它符合你的问题。看起来 Durandal 确实尝试支持此功能,但我们都缺少一些细微差别。 如果我弄清楚了,我会在这里更新。