1

我正在使用 Durandal 2.0 构建应用程序。
我的外壳视图如下所示：

<div>
    <header id="nav" data-bind="compose: 'viewmodels/nav', activate: false">
    </header>
     <section id="content" class="main container-fluid" data-bind="router: { transition: 'entrance' }, activate: false" style="overflow: auto">
     </section>
    <footer>
        <!--ko compose: {view: 'footer'} --><!--/ko-->
    </footer>
</div>

在导航部分，我想要我的选项卡和用户的下拉列表（两者都是从 Web 服务中检索的）。从下拉列表中选择用户将导航到将更新内容部分的新 URL。 （路由看起来像 localhost/#user1/tab2）。

  • 问题： 在检索内容部分的数据之前，我需要知道从导航部分中选择的用户，但是在我检索到用户之前，内容部分正在激活。

这实际上只是初始页面加载的一个问题，因为用户列表只检索一次。

  • 有没有办法告诉内容部分等到导航部分完成加载？
  • 有没有比我正在做的更好的方法来解决这个问题？

导航激活函数如下所示：

function activate(context) {        
    return dataservice.getUsers().then(function () {
        //do stuff
    });
});

这个激活函数首先被调用，然后 dataservice.getUsers() 被调用，但是内容模块的激活函数在“做东西”部分发生之前被调用（并且在来自 getUsers 调用的数据在数据服务中返回之前） . 也许我的承诺有问题？

编辑
我已经把一个 dFiddle 和一些实际的代码放在一起，这些代码显示了我在说什么：http://jerrade.github.io/dFiddle-2.0/#test/dashboard代码
在这里：https://github。 com/jerrade/dFiddle-2.0

导航.js 

 function activate(context) {
     console.log('Nav View Activated');
     if (vm.impersonateUsername == undefined)
         vm.impersonateUsername = getUsernameFromWindowLocation();

     return dataservice.getPageDetailForEmployee(vm.loggedInUsername, vm).then(function () {
         console.log("Page details retrieved");

         // I want to do something here before the dashboard activates.
     });
  }

仪表板.js 

 function activate(username) {
        console.log('Dashboard View Activated');
        //vm.username = nav.selectedImpersonateEmployee().Username;        
        return dataservice.getDashboard(nav.impersonateUsername, dashboard);
    }

打开页面并观察控制台。你会看到（除其他外）

Nav View Activated  
Dashboard View Activated  
Page details retrieved

我真正想要的是在仪表板视图激活之前检索页面详细信息。我实际上已经重新调整了一些事情，以便目前这不再是一个问题，但它可能会再次出现。

看起来我想做的事情不应该这么复杂。除非我在这里将方形钉子敲入圆孔？

4

1 回答 1

0

isUserLoaded最简单的做法是在您的视图模型上添加一个名为类似的可观察对象。然后，在内容部分周围应用if绑定：

<div>
    <header id="nav" data-bind="compose: 'viewmodels/nav', activate: false">
    </header>
    <!-- ko if: isUserLoaded -->
     <section id="content" class="main container-fluid" data-bind="router: { transition: 'entrance' }, activate: false" style="overflow: auto">
     </section>
    <!-- /ko -->
    <footer>
        <!--ko compose: {view: 'footer'} --><!--/ko-->
    </footer>
</div>

加载用户后，您可以将 observable 更新为，true并且您的内容绑定应该会触发。

编辑

如果这不起作用，听起来您的路由器必须仍在解析内容视图模型（这可能指向路由问题？很难说没有看到您的整个解决方案）。

无论如何，如果它不是路由问题，那么您可以采用一种解决方案，让您的内容模型从它的 activate 方法返回一个未解决的承诺；然后在加载用户时解决该承诺。例如，类似以下内容：

用户模型.js：

define([], function () {
    // single instance to track the loaded user
    var userModel = {
        selectedUser: ko.observable()
    };

    return userModel;
});

导航模型.js：

define(["dataService", "userModel"], function(dataService, userModel) {
    // view model for the nav bar
    var navModel = {        
        // model definition
    };

    // load the user
    navModel.activate = function() {
        return dataService.getUsers().then(function(response) {
            // Push the user to the userModel
            userModel.selectedUser(response.user);
        });
    };

    return navModel;
});

内容模型.js：

define(["userModel"], function (userModel) {
    var contentModel = {
        // model definition
    };

    contentModel.activate = function () {
        // Prevent activation until user is resolved
        var deferred = $.Deferred();

        var subscription = userModel.selectedUser.subscribe(function (user) {
            if (!user)
                return;

            subscription.dispose();
            deferred.resolve();
        });

        return deferred.promise();
    };

    return contentModel;
});

如果您不想对userModel.selectedUser属性使用 observable，则可以改用另一个 deferred，或在加载用户时触发事件等。无论您的船如何漂浮！

于 2013-11-12T00:41:15.800 回答