javascript - Durandal 和 Knockout : do a css binding to body element

Question

我正在尝试通过检查模块的状态(用户登录的帐户类型)来制作 Durandal 应用程序(采用 Knockout 的 SPA 框架)的主体元素。在应用程序外壳的 View 模型中，我有以下代码:

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");
  }
}

如果我在以 diff 帐户类型登录时刷新页面，一切正常。但是作为一个SPA框架，在使用过程中是没有页面刷新的。因此，这些类(class)没有按照我的意愿应用。我如何才能使 body、container 和 nav 元素的类按照我的意愿进行绑定(bind)？

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

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

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

Answer 1

因为您想在体内(全局)执行此操作。所以我的假设是您想在帐户信息更改后立即更新 css 类。您可以使用帐户信息创建一个单例可观察对象。当它发生变化时，您只需订阅 observable。

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

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

我会说你不想在每个 View 模型中都这样做。所以我建议 Hook 路由器上的 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());

希望对您有所帮助。