Durandal 和 Knockout：对 body 元素进行 css 绑定

Question

我正在尝试通过检查模块的状态（用户登录的帐户类型）来制作 Durandal 应用程序（使用 Knockout 的 SPA 框架）的正文元素。在应用程序外壳的视图模型中，我有以下代码：

function bindingComplete() {
  viewhelper.accountVisualTreatment();
}

而accountVisualTreatment 是在viewhelper 模块中定义的：

if (typeof(appsecurity.userInfo()) == 'undefined') {
  $("body").addClass("notloggedin");
  $(".container").addClass("notloggedin");
} else {
  if (appsecurity.isUserInRole(['Account Manager']) && !appsecurity.isUserInRole(['Administrator'])) {
    $("body").addClass("accountmanager");
    $("nav").addClass("hidden");
  } else {
    $("body").removeClass();
    $(".container").removeClass("notloggedin");
    $("nav").removeClass("hidden");
  }
}

如果我以差异帐户类型登录时刷新页面，一切正常。但是作为一个 SPA 框架，在使用时没有页面刷新。因此，这些课程并没有按照我的意愿应用。如何使 body、container 和 nav 元素的类按我的意愿绑定？

编辑：我尝试在不同帐户类型的登录页面的视图模型中调用 viewhelper.accountVisualTreatment()，但无济于事。仍然需要刷新页面。

编辑：我通过在我的 shell.html 中将 css 绑定应用到容器 div 来丑陋地修复它

<div class="container" data-bind="css: viewhelper.accountVisualTreatment()"> ... </div>

Answer 1

因为您想在正文中执行此操作（全局如此）。所以我的假设是您想在 accountinfo 更改后立即更新 css 类。您可以使用 accountinfo 创建一个可观察的单例。当它发生变化时，您只需订阅 observable。

唯一的问题是不在 dom 中的元素。 （比如在加载页面之间）。因为你使用 Durandal，所以你有不同的钩子来用 jQuery 改变 dom。

要在视图模型中执行此操作，您应该使用 attached() 或 compositionComplete() 请参阅：http://durandaljs.com/documentation/Hooking-Lifecycle-Callbacks.html。这是当 dom 完全附加到视图模型和所有可观察对象时从 durandal 获得的回调。

我会说你不想在每个视图模型中都这样做。所以我建议挂钩路由器上的router:navigation:composition-complete 事件，请参阅：http://durandaljs.com/documentation/api.html#class/Router/event/router:navigation:composition-complete。这将确保您获得每个新哈希导航的回调。

您可以在启动应用程序的数据主中注册全局事件：

app.on('router:navigation:composition-complete').then(viewhelper.accountVisualTreatment());

我希望这会有所帮助。