Question

我的Durandal应用程序的

DOM 结构如下：

  //shell.html
  <div id="applicationContentWrapper" >
    <!-- ko compose: {model: 'viewmodels/header', activate:true} --> <!-- /ko -->
    <div data-bind="router:{}"></div>
  </div>

这是我的路由器配置片段

router.map([
        { route: '', moduleId: 'viewmodels/dashboard', name: 'dashboard'},
        { route: 'form', moduleId: 'viewmodels/form', name: 'form'},
        { route: 'login', moduleId: 'viewmodels/login', name: 'login'}
]);

正如您所见，我的登录视图被插入<div data-bind="router:{}"></div>这是预期的行为。但如果我在登录视图中，我需要隐藏标题视图，我已通过订阅标头视图模型中的路由器配置来设置该视图：

router.activeInstruction.subscribe(function (val) {
    val.config.name === "login" ? showHeader(false) : showHeader(true);
});

但是这感觉有点乱，标题视图的 DOM 仍在页面中，我真正想要做的就是如果我在登录视图我只希望登录视图的 DOM 就像我在单独的页面中一样只有登录视图。但到目前为止，我还没有找到一个干净的方法来做到这一点。

Answer 1

一些事情：

安全的最终责任绝不是你的前端。恶意用户可以轻松访问前端“关闭”的所有内容。后端应该保护您的所有功能和数据，前端只隐藏它以为用户提供更好的体验。换句话说，它仍然在DOM中（从安全角度来看）并不重要。即使不是，也不会更安全。
如果您不想在DOM中拥有节点（出于性能原因），请使用with或if - 绑定。如果病情是假的，他们会隐藏内心的任何内容。
activeInstruction上的订阅确实有点乱。你需要改进你的逻辑。标题未被隐藏，因为用户在登录页面上，标题被隐藏，因为用户未登录。这是一个巨大的差异。你在做什么本质上是一个肮脏的黑客。在shell viewmodel（或其他地方）中有一个observable / computed observable，它返回用户是否经过身份验证。然后根据它，显示/隐藏您的标题。
使用上面提到的经过身份验证的可观察对象，您还可以通过检查此可观察对象来“保护”您的视图。这样，您可以确保用户无法导航到需要进行身份验证的路由。但是，此安全检查的最终责任在于您的后端，而不是您的前端。

修改

我可以理解你想要一个完全不同的'布局'而没有其他DOM用于登录视图的理由。但这违背了单页应用程序的整体想法。这也是不必要的。一些智能css和数据绑定（可见，if，with）将为您提供相同的结果，通常提供比完整页面重新加载更好的用户体验。如果您坚持打破SPA，请将路由器放低一级：例如主路由器只知道登录路由和内部路由。内部路由有另一个路由器，其中包含所有其他页面。这样，您就可以将常用HTML从shell视图移动到内部视图。

Durandal应用程序中的单独登录视图

1 个答案:

修改