【问题标题】:DurandalJS Routing BehaviorDurandalJS 路由行为
【发布时间】:2013-04-07 01:11:13
【问题描述】:

我有什么

试图了解正在发生的事情以及如何控制它。对于尚未通过身份验证的用户,我有一个“公共”视图,对于经过身份验证的用户,我有一个“主页”视图。这是我的路线配置:

app.start().then(function() {
        //Replace 'viewmodels' in the moduleId with 'views' to locate the view.
        //Look for partial views in a 'views' folder in the root.
        viewLocator.useConvention();

        //configure routing
        router.useConvention();

        router.mapRoute('home', 'viewmodels/home', 'Test App', true);
        router.mapRoute('public', 'viewmodels/public', 'Test App', true);
        router.mapRoute('set/:id', 'viewmodels/set', 'Set');
        router.mapRoute('folder/:id', 'viewmodels/folder', 'Folder');
        router.mapRoute('api', 'viewmodels/api', 'API Reference');
        router.mapRoute('error', 'viewmodels/error', 'Error', false);
        app.adaptToDevice();

        //Show the app by setting the root view model for our application with a transition.

        if (dataservice.isAuthenticated() === true) {
            app.setRoot('viewmodels/shell', 'entrance');
            router.navigateTo('home');
        } else {
            app.setRoot('viewmodels/public');
            router.navigateTo('#/public');
        }

        router.handleInvalidRoute = function (route, params) {
            logger.logError('No route found', route, 'main', true);
            router.navigateTo('#/error');
        };
    });

问题

当我第一次运行应用程序时,我没有通过身份验证,并且出现错误:

Uncaught TypeError: Cannot call method 'lookupRoute' of undefined 

源自'router.navigateTo('#/public');' 行。

然后当我尝试点击登录按钮时,我得到同样的错误:

define(['durandal/app', 'durandal/plugins/router', 'services/dataservice'], function (app, router, dataservice) {
   var publicViewModel = function () {
        self.logIn = function () {
            app.setRoot('viewmodels/shell');
            router.navigateTo('#/home');
        };

但内容加载正确。当我通过单击导航到特定页面时,比如说 /folder/2,然后将 url 更改为 /folders/2(无效),我的日志中出现“找不到路由”,正如预期的那样,但我遇到了其他几个问题:

  1. 我没有收到错误页面或任何错误(我认为我应该按照我的 handleInvalidRoute)
  2. 如果我单击其他内容,则 url 不会改变,也不会加载新内容,同样没有错误。

我想我以某种方式破坏了路由,但我不确定如何。我该如何纠正上述问题?

屏幕:

【问题讨论】:

  • 您的 javascript 控制台中是否显示任何内容? - 根据我的经验,durandal 非常擅长告诉你可能出了什么问题
  • 再次感谢互斥锁。我更新了我的代码和描述 - 我现在遇到了一些与路由相关的错误,但无法弄清楚发生了什么:/
  • 您的 public.js 视图模型是什么样的?有路由器吗?
  • 更新了我的代码示例以显示我如何将其拉入 - 我只是在“定义”语句中指定路由器。对吗?
  • 我对 DurandalJS 比较陌生。我正在寻找一种对用户进行身份验证的方法。你能解释一下 dataservice.isAuthenticated() 是如何工作的吗?谢谢

标签: javascript knockout.js single-page-application durandal


【解决方案1】:

我怀疑由于某种原因调用 navigateTo 可能为时过早。要测试此理论,请尝试移动此代码。

    if (dataservice.isAuthenticated() === true) {
        app.setRoot('viewmodels/shell', 'entrance');
        router.navigateTo('home');
    } else {
        app.setRoot('viewmodels/public');
        router.navigateTo('#/public');
    }

在您的 publicviewmodel 上的“激活”方法中,并在 main.js 中留下这个:

app.setRoot('viewmodels/public');

编辑:旧建议

我相信你的根视图模型需要一个路由器属性。所以修改你的公共视图模型添加一个:

define(['durandal/app', 'durandal/plugins/router', 'services/dataservice'], function (app, router, dataservice) {
   var publicViewModel = function () {
        self.router = router;
        self.logIn = function () {
            app.setRoot('viewmodels/shell');
            router.navigateTo('#/home');
        };

(你在哪里定义自我?)

【讨论】:

  • 我在里面定义了 self ,我只是在把所有其他方法都拉出来的时候不小心把它拿出来了。我尝试了您的建议,但没有成功……仍然出现路由器错误。我深入研究它,它看起来好像与萨米有关?更新了我的帖子。
  • 我不知道我是否正确地这样做了,但是我在 publicViewModel 定义之后(在结束卷曲之后)添加了 if/else 并且我仍然得到同样的错误..不确定那是不是你说的激活是什么意思。
  • 对不起,激活是指视图模型上的一个方法,字面意思是激活。 durandal 会为你调用这个。所以你会有 self.activate = function() { /*If else in here*/ };在视图模型上
  • 我只在 activate 方法中添加了 if 语句(else 给了我一个无限循环),现在当我加载应用程序时,没有抛出错误并显示正确的页面。但是当我单击“logIn”时,navigateTo 返回相同的错误。如果我无法弄清楚,我会玩这个并发布一个更具体的问题;再次感谢:)
  • 很高兴它有帮助。对我来说,通过应用程序进行多次“app.setRoot”调用有点糟糕,我可能会尝试重构以避免这种情况。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-12-18
  • 1970-01-01
  • 2013-11-14
相关资源
最近更新 更多