8

我正在开发一个我想使用多个主视图的 SPA。这是我的用例：

我有一个有个人资料页面的用户。在该个人资料页面中，我希望能够显示几个不同的视图，即。详细信息、作品、联系信息等。我需要能够深度链接到这些视图中的每一个。这些视图中的每一个都必须显示来自主布局视图的基本用户数据。

我的理解是我应该为此使用 compose，并且我有一些似乎可以工作的代码，但是，我希望能够将数据从“辅助 shell”传递到实际的子视图。似乎 splat 数据没有传递给子视图模型的激活方法。

在我的“主”视图模型中，我创建了一个名为 activeView 的可观察对象，其中包含对应于子视图模型（视图模型/用户/详细信息）的字符串。然后我有一个淘汰声明如下：

<!-- ko compose: {
    model: activeView(),        
    activate: true
} --><!-- /ko -->

如何将数据传递给子视图？还是有更好的方法来做到这一点？

提前致谢！

4

2 回答 2

1

据我说，ko.compose 不是那么动态，并且似乎像 Razor 的布局一样工作。使用 durandal，最好尽可能制作单独的视图，然后将它们链接到路由器。我正在使用 John Papa 的热毛巾模板；我的建议涉及使用 durandal 路由器和淘汰赛传递数据（不仅仅是 id）。

在初始化您的应用程序（shell.js、main.js、...）时， 将您的路由映射到某处（shell.js 或 main.js），并设置最终过滤。对于将传输数据的路由，使用 (:id) 提案构建它们

router.mapRoute('view/:id', moduleId, 'Customer Details', false);

何时何地需要一些路线 您可以查看 Joseph Gabriel 的解决方案 ( https://stackoverflow.com/a/16036439/2198331 ) 来过滤您的路线，以便在您需要的时间和地点使用它们。过滤路由后，您可以破解routeInfo以传输您的参数（字符串或对象，如 selectedItem）。

arearoutes = ko.utils.arrayFilter(router.visibleRoutes(), function (route) {
              // mgpe has been set at app init
                return route.settings.mgpe === 112; 
             });

使用您要传输的数据从过滤器的结果中扩展您的 routeInfo

areaRoutes.forEach(function(ar){
     ar.myItem = mydata; // or vm.selectedItem(); DEPARTURE LUGGAGE
}, areaRoutes);

您的 (myItem) 现在已按照您的喜好附加到这些路由上。 这个或这些路由将随身携带您的数据，并且永远不会丢失它，除非您更新了路由器的相同对象 ( myItem )

function activate(adata){
       vm.arrivalData(adata.routeInfo.myItem);  // ARRIVAL LUGGAGE are here
}

路由可以携带嵌套路由 对于嵌套上下文（如嵌套菜单）很有用；当父路线处于活动状态时，您可以通过准备旅行来玩子路线：

router.activeItem.settings.areSameItem = function (currentItem, newItem, activationData) {
   mybag = activationData.routeInfo; // TRAVEL (current) LUGGAGE are present here
}

注意：在使用此解决方法之前，您必须考虑安全问题，因为我是 durandal 新手，我不知道这是否不会对路由器的路由生命周期造成严重后果。还要注意对象的名称，因为它在路由器的路由生存期间永久存在。

于 2013-05-09T23:24:15.967 回答
0

您如何创建一个用户对象并在每个视图模型中都需要它？简单的方法是将其附加到应用程序（即 app.user = ） 对所述用户对象中的任何可观察对象所做的更改将更新到您的 SPA 中的每个视图和视图模型。

这样你就可以利用淘汰库的 sub/pub 的功能

于 2014-01-15T21:07:09.873 回答