0

我的 SPA 顶部有一些主要的导航按钮。在内容区域下方，每个主要按钮都有一些按钮。在这些内容按钮上加载一个由 3 个视图组成的向导。这意味着用户首先导航到 view1，然后单击下一步按钮导航到 view2，然后在所有验证成功后导航到 view3。

现在，当我为所有视图模型/视图设置路线时，用户可以直接导航到 view3，这将绕过我的验证。

也许你现在说，我不应该为这些视图创建路线，但是我也无法导航到它们......

那么如何为 view2 和 view3 设置一个不应直接向用户公开的路线，但如果 view1 绕过了验证，我需要能够导航到它们？

我找到了有关 durandaljs 并阻止导航到某个 url 的信息：

· 为路由器添加了一个guardRoute 挂钩，以根据路由允许、拒绝或重定向。

但我不知道如何在我自己的视图模型中使用guardRoute ...

4

1 回答 1

2

不久前， Durandal 的新闻组上有一个与此问题相关的问题。

简而言之，不要使用路由器功能，而是使用 ViewModel.activator() 在这些步骤之间切换。这样您就可以完全控制，根据向导 VM 的状态可以访问哪些步骤。

这是 Rob 从上面的帖子中得到的建议：

编曲，编曲，编曲。:) 如果我正在构建一个向导，我会这样做：

  1. 创建一个管理当前页面并转换下一个/后退的模块。为它创建一个视图，使用 compose 来引入当前页面
  2. 为向导的每个步骤创建一个模块，该模块具有唯一的字段和验证。
  3. 为每个模块步骤创建一个视图。

这里的所有都是它的。像这样的东西：

更新示例：

现场版：http ://dfiddle.github.io/dFiddle-1.2/#/view-composition/wizard

define(['durandal/viewModel', './step1', './step2', './step3'], function( viewModel, Step1, Step2, Step3 ) {

    var steps = [new Step1(), new Step2(), new Step3()];
    var step = ko.observable(0);
    var activeStep = viewModel.activator();
    var stepsLength = steps.length;

    var hasPrevious = ko.computed(function() {
        return step() > 0;
    });

    var hasNext = ko.computed(function() {
        return (step() < stepsLength - 1);
    });

    // Start with first step
    activeStep(steps[step()]);

    return {
        showCodeUrl: true,
        steps: steps,
        step: step,
        activeStep: activeStep,
        next: next,
        previous: previous,
        hasPrevious: hasPrevious,
        hasNext: hasNext
    };

    function next () {
        if ( step() < stepsLength ) {
            step(step() + 1);
            activeStep(steps[step()]);
        }
    }

    function previous () {
        if ( step() > 0 ) {
            step(step() - 1);
            activeStep(steps[step()]);
        }
    }

});

查看整个线程以获取更多信息。

于 2013-05-12T16:15:56.620 回答