Question

我正在尝试通过检查模块的状态（用户登录的帐户类型）来创建Durandal应用程序的body元素（使用Knockout的SPA框架）。在app的shell的viewmodel中，我有以下代码：

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中对容器div应用css绑定来解决这个问题

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

Answer 1

因为你想在体内这样做（所以全局）。所以我的假设是你想在accountinfo更改后立即更新css类。您可以使用accountinfo创建单一的observable。当它改变时，你只需订阅observable。

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

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

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

我希望这会有所帮助。

Durandal和Knockout：做一个绑定到body元素的css

1 个答案: