标签: durandal

VS2012 MVC4中的某些单页面应用程序(SPA)模板具有内置身份验证.HotTowel SPA模板没有.

在SPA HotTowel中实现用户身份验证(登录屏幕)的正确方法是什么？HotTowel使用Durandal JS,所以我想问题是如何使用Durandal JS实现用户身份验证

我是整个客户端SPA世界的新手.我正在使用上述技术,这似乎很有前途.然而,一个我无法轻易克服的巨大障碍是缺乏内置安全性.我不得不手动推出用户授权,恕我直言应该是框架的一部分.

现在我已对其进行了排序,我对垂直安全性感到头疼:一个用户登录但可以通过更改浏览器控制台中的一些参数轻松访问其他用户的信息.我可以在每次调用时传递userId,然后将其与服务器上的那个进行比较,但我希望有一个总体解决方案,不会污染用户ID的微风数据调用.

例如,假设有一个来自数据服务的调用,如下所示:

function getItems(){        
         var query = breeze.EntityQuery.from('Items').expand("Person");
         return manager.executeQuery(query);
}

这将得到所有项目,不好.所以让我们限制userId:

function getItems(userId){        
         var query = breeze.EntityQuery.from('Items').where("userId", "==", authentication.userId).expand("Person");
         return manager.executeQuery(query);
}

在第二个示例中,我们从身份验证服务获取userId,该服务在用户登录时存储userId.但是,恶意用户可以轻松访问浏览器控制台并更改该值.

当然,我可以使用withParameters(...)传递userId并将其与服务器上的当前版本进行比较,但我必须为每次调用执行此操作,这似乎不正确.有没有更好的方法来保护可信用户ID的呼叫？

我刚刚开始与Durandal合作,所有的部件都落到了位置,我正在使用Hot Towel模板加快速度.

让我感到困惑的一件事是如何创建一个比buttongroup更复杂的分层导航系统.这就是我想要的结果:

ABC
A1 B1 C1
A2 B2 C2

A,B和C是没有附加路由的顶级菜单 - 它们只是占位符.我将为A1,A2,B1,B2,C1和C2提供视图和视图模型,并且需要将这些哈希标记作为活动链接.

我现在最好的想法是将父菜单附加到每个路径的url中,并在nav.html中使用代码,根据解析url将每个节点动态添加到相应的父节点中.要完全动态,它将动态添加父节点和子节点.

        {
          url: 'A_A1',
          moduleId: 'viewmodels/A_A1',
          name: 'A1',
          visible: true
        }

我已经用Durandal搜索了很多层次导航示例,但还没有看到任何东西.有没有最佳实践可以将导航功能扩展到简单的一维列表之外？我是否忽略了路由器中的一些功能,我没有看到,如果不将层次结构信息嵌入到视图名称中,我会这样做？

编辑:我只是将答案标记为正确,即使我对提出的任何解决方案都不满意.当选择一个框架来抽象和分离逻辑,表示和控制时,再次开始合并这些结构只是为了提供更多的基本导航shell似乎很愚蠢.我已经将我的开发工作转移到了angularjs,这样的事情变得更加直观并且可以保持分离.希望Durandal能够在不久的将来向前推进一步,我肯定会为未来的项目重新评估它.

我一直在使用基本的Durandal HTML模板,但我已经用Zurb Foundation替换了Bootstrap.一切都运作良好,除了我无法打开任何模态,下拉或任何需要基础初始化的问题.通常会将以下内容放在您网页的正文中:

<script>
  $(document).foundation();
</script>

我试图把这个在Index.html,Shell.html在视图模型和视图,甚至随意.此外,我尝试在main.js中使用JS启动它,并在activate部分中使用viewmodel本身.这些都没有奏效.我发现的(希望是非常临时的)解决方法是实际初始化我的javascript基础,当单击按钮打开模态时:

$(document).foundation();
$("#myModal").foundation("reveal", "open");

我哪里错了？

我main.js的参考:

(function() {
  requirejs.config({
    paths: {
      text: "../lib/require/text",
      durandal: "../lib/durandal/js",
      plugins: "../lib/durandal/js/plugins",
      transitions: "../lib/durandal/js/transitions",
      knockout: "../lib/knockout/knockout-2.3.0",
      jquery: "../lib/jquery/jquery-1.9.1",
      foundation: "../lib/foundation/js/foundation/foundation",
      "foundation.abide": "../lib/foundation/js/foundation/foundation.abide",
      "foundation.accordion": "../lib/foundation/js/foundation/foundation.accordion",
      "foundation.alert": "../lib/foundation/js/foundation/foundation.alert",
      "foundation.clearing": "../lib/foundation/js/foundation/foundation.clearing",
      "foundation.dropdown": "../lib/foundation/js/foundation/foundation.dropdown",
      "foundation.interchange": "../lib/foundation/js/foundation/foundation.interchange",
      "foundation.joyride": "../lib/foundation/js/foundation/foundation.joyride",
      "foundation.magellan": "../lib/foundation/js/foundation/foundation.magellan",
      "foundation.offcanvas": "../lib/foundation/js/foundation/foundation.offcanvas",
      "foundation.orbit": "../lib/foundation/js/foundation/foundation.orbit",
      "foundation.reveal": "../lib/foundation/js/foundation/foundation.reveal",
      "foundation.tab": "../lib/foundation/js/foundation/foundation.tab",
      "foundation.tooltip": "../lib/foundation/js/foundation/foundation.tooltip",
      "foundation.topbar": "../lib/foundation/js/foundation/foundation.topbar"
    },
    shim: {
      jquery: {
        exports: "jQuery"
      },
      foundation: {
        deps: ["jquery"]
      },
      "foundation.abide": { …

我有一个带有区域的互联网应用程序mvc4,对于我的组织,每个区域代表一个SPA,通过"管理NuGet包",我安装了"Durandal 1.2.0","Durandal Transitions 1.2.0"和"Durandal Router 1.2.0".我组织了文件夹并退出Durandal文件夹"App"中的"views"和"viewmodels",并将新视图放在mvc4区域的文件夹"VIews"中,例如:

领域 - > NewArea - >查看 - > ControllerFolder - >视图 - > shell.html

然后我将'"viewmodels"放在"Script"文件夹中,例如:

脚本 - > NewArea - > ControllerFolder - >的ViewModels - > shell.js

脚本 - > NewArea - > ControllerFolder - > main.js

然后我改变了durandal JS的路径,例如在main.js中:

define(['../../../App/durandal/app',
    '../../../App/durandal/viewLocator',
    '../../../App/durandal/system',
    '../../../App/durandal/plugins/router',
    '../../../App/services/logger'],

我在下一行改变了main.js:

viewLocator.useConvention('viewmodels', '../Areas/NewArea/Views/ControllerFolder/views');

但是文件夹的配置失败,因为下一行在其定义中调用了模块"viewLocator"的不同时间,并使用默认值重写"useConvention"的配置:

app.setRoot('viewmodels/shell', 'entrance');

仅当文件夹"views"和"viewmodels"不在"Durandal"的"App"文件夹下时才会发生这种情况.

请帮助我,如何在同一个项目中拥有各种SPA？

这是我的第一篇文章,祝我好运:)

我想使用热毛巾(durandal)+打字稿,我遵循这些线程: - 我怎么用-a-class-for-my-shell-viewmodel-in-durandal - how-to-use-fancybox-与durandal-en-typescript组合 - 错误 - 这是在选择中

并尝试了DurandalTypescriptExample示例

此示例不会运行此错误:

"'''应用程序中的服务器错误.

无法找到该资源."

起初我决定只使用typescript更改我的viewmodels,然后在那个shell之后,但在这两种情况下我都遇到了这个错误:

这是我的shell.ts代码(我从这个示例中使用):

/// <reference path="../durandal/durandal.d.ts" />

import _router = module('durandal/plugins/router');
import app = module('durandal/app');

export var router = _router;

export function search() {
    app.showMessage('Search not yet implemented...');
}
export function activate() {
    return router.activate('welcome');
}

我收到了这个错误:

- JavaScript runtime error: 'exports' is undefined

任何的想法？

如果可行,可行的解决方案是值得赞赏的.

thanx伙伴们让我们看看会发生什么.

我正在使用一个SPA,它将有许多不同的区域,每个区域都有几页.我的老板真的不想要几十个视图和viewmodels文件夹,每个文件夹中包含几个项目.如何配置Durandal使用以下内容:

/App/Areas/Login/
                 login.html
                 login.js
/App/Areas/Here/
                 subpage1.html
                 subpage1.js
                 subpage2.html
                 subpage2.js
                 subpage3.html
                 subpage3.js
/App/Areas/There/
                 subpage1.html
                 subpage1.js
                 subpage2.html
                 subpage2.js
                 subpage3.html
                 subpage3.js

我看过其他关于区域的类似问题,但不太清楚如何开始.谢谢.

我正在尝试找出运行长时间运行加载操作的最佳位置是使用Durandal.

据我所知,加载数据的一般建议是在ViewModel的activate方法中,这是我通常做的 - 类似于:

viewModel.activate = function () {
    var loadPromise = myService.loadData();

    return $.when(loadPromise).then(function (loadedData) {
        viewModel.data(data);
    });
};

我知道如果我不在这里回复承诺,那么绑定通常会出现问题 - 正如这个问题和答案所表明的那样.

但是,在activate方法中执行长时间运行的加载操作会使应用程序在加载操作完成时"冻结".例如,如果我的负载现在是这样的呢？

viewModel.activate = function () {
    // All loads return a promise
    var firstLoad = myService.loadFirstData();
    var secondLoad = myService.loadSecondData();
    var thirdLoad = myService.loadThirdDataWhichTakesAges();

    return $.when(firstLoad, secondLoad, thirdLoad).then(function (one, two, three) {
        viewModel.one(one);
        viewModel.two(two);
        viewModel.three(three);
    });
};

在这种情况下,URL会更新以反映正在加载的页面,但页面内容仍然显示上一页(我的意思是"冻结").

理想情况下,如果URL应更改为新页面,并且页面内容也应显示新页面(即使尚未返回该页面的数据),也会很好.然后,当每个加载操作返回时,当数据绑定到视图模型时,应更新页面的相关部分.

是否有推荐的方法在Durandal内部实现这一目标？

我目前的解决方案是启动activate方法中的负载,然后填充viewAttached方法中的数据:

var loadPromise;

viewModel.activate = function () …

在我的shell中,我已经设置了我的路线:

router.map([
            { route: '', title: 'Search', moduleId: 'viewmodels/search/search' },
            { route: 'location/:paramX/:paramY', title: 'Location', moduleId: 'viewmodels/location/location' }
        ]).buildNavigationModel();

我有一个像这样的激活方法:

activate: function(paramX, paramY) {
    // TODO: set document title
    // TODO: do something with input params    
}

对于位置页面,文档标题设置为Location | [我的应用名称].我想将此更改为由激活方法(paramX,paramY)中的params组成,用于我的位置页面的activate方法.我该怎么做呢？

当我尝试使用子路由时,我得到"路由未找到".为了覆盖我的基础,这里是如何设计应用程序中的路由.

main.js文件包含顶部导航的路由,并且完成为 -

                    router.map([
                        { route: 'LOC', moduleId: 'LOC', title: 'LC', nav: 3 }
                    ]);

我为页面的页脚绘制路线 -

        router.map('About', 'About', 'About', false);
    router.map('Help', 'Help', 'Help', false);

当用户点击上面创建的"LOC"路线时,左侧导航将显示在该视图上.该视图使用子路由并设置为 -

var childRouter = router.createChildRouter()
    .makeRelative({
        moduleId: 'viewmodels/',
        fromParent: true
    }).map([
                        { route: '*LCClientSearch', moduleId: 'LCClientSearch', title: 'Create LC', type: 'intro', hash: '#LCClientSearch', nav: true },
                        { route: '*LCPending', moduleId: 'LCPending', title: 'Pending LC', type: 'intro', hash: '#LCPending', nav: true }

    ]).buildNavigationModel();

LOC默认为LCClientSearch路线并最初正确显示,但是,从那一点开始没有任何正确的事情发生.当用户点击LCClientSearh或LCPending时,我收到"找不到路由"错误.

LOC视图 -

     <div class="span2 well">
    <ul class="nav nav-list">
        <li class="nav-header">Availability</li>

        <!--ko …