标签: durandal

我一直在研究如何根据谷歌的指示谷歌可以抓取SPA .尽管有很多一般性的解释,但我找不到更详尽的逐步教程和实际示例.完成此操作后,我想分享我的解决方案,以便其他人也可以使用它,并可能进一步改进它.
我使用MVC与Webapi控制器和Phantomjs在服务器端,并迪朗达尔与客户端push-state启用; 我还使用Breezejs进行客户端 - 服务器数据交互,我强烈推荐所有这些,但我会尝试给出一个足够的解释,也可以帮助人们使用其他平台.

我有一个使用Durandal的SPA应用程序.

我的程序定期开始有一个http请求:

http://localhost:1551/f9750d8f8aa54265835e72d56d23144a/arterySignalR/poll?transport=longPolling&connectionToken=AQAAANCMnd8BFdERjHoAwE%2FCl%2BsBAAAACM1YyjLngEiQsL54ET%2B%2FqwAAAAACAAAAAAADZgAAwAAAABAAAAAyZZfHz09psv64kIgPPwQNAAAAAASAAACgAAAAEAAAABMZImCidzdmb21ehxuGD4IoAAAAbazfW7CYR7y7HKb8JPt9ZH9b6fUDlZao60kBG662Vy%2Fb0IHwkwidthQAAAA1qSqnsCOheiNyXiINEyBPBAkqVg%3D%3D&messageId=d-79160814-B%2C0%7CC%2C4%7CD%2C0&requestUrl=http%3A%2F%2Flocalhost%3A2690%2F&browserName=Firefox&tid=5&_=1391326350868

我不知道它来自哪里？我记得我没有添加任何SignalR或类似的东西.

如何检查我的代码的哪一部分正在生成此请求？然后删除它.

我正在使用的技术是:

• 迪朗达尔
• ASP.NET MVC 4.0
• 昏死
• ASP.NET WebApi

我的SPA的某些区域需要向所有用户开放,有些区域需要身份验证.在这些领域,它是我想要保护的通过AJAX加载的数据.

我有一个身份验证服务(见下文),我在durandal main.js中添加了一个依赖项.该服务被称为:

authentication

在我的main.js中,我打电话

authentication.handleUnauthorizedAjaxRequest(function () {
        app.showMessage('You are not authorized, please login')
        .then(function () {
            router.navigateTo('#/user/login');
        });
    });

它警告用户他们未被授权,并将用户导航到登录视图/ viewmodel,在那里他们可以输入详细信息并尝试登录.

构建此身份验证viewModel时会想到一些问题:

• 对我正在做的事情有任何明显的担忧吗？
• 这是我在Durandal做事的意思吗？
• 我是在重新发明轮子吗？在Durandal中我看不到这样的事情.

大多数人似乎都在创建单独的cshtml页面; 一个用于登录(如果用户未经过身份验证),通常的index.cshtml有没有充分的理由让我切换到该方法？

我在服务器端"用户控制器"上的登录操作具有我需要发送的[ValidateAntiForgeryToken]属性.
我还有一个'antiforgery'服务(见下文),我也在main.js viewModel文件中添加了一个依赖项(也在我的main.js中).

antiforgery.addAntiForgeryTokenToAjaxRequests();

这会拦截所有ajax请求(以及内容),并将MVC AntiForgeryToken值添加到数据中.似乎完全按照我的意愿工作.如果有任何错误/错误,请告诉我.

完整认证服务如下.

// services/authentication.js
define(function (require) {
    var system = require('durandal/system'),
    app = require('durandal/app'),
    router = require('durandal/plugins/router');

    return {
        handleUnauthorizedAjaxRequests: function (callback) {
            if (!callback) {
                return;
            }
            $(document).ajaxError(function (event, request, options) {
                if (request.status === 401) …

对Durandal js和html文件进行版本控制的好策略是什么？

我注意到,在开发过程中,必须禁用浏览器缓存,以便在每次刷新时接收最新文件.这是开发过程中必须的.

但是,我担心的是,当我使用我的持续部署策略(每天多次部署)进行生产时,用户的浏览器将缓存我的应用程序的旧版本,这可能会导致不可预测的行为.

想到的方法是以某种方式对js和html url进行版本化,以便在每个请求中嵌入版本号.但我不确定如何在Durandal框架内部进行这项工作.

如果这是一个简单的误解,我还没有完全理解承诺,所以道歉.

我有一个删除页面上的项目的功能,但我有一个特定的行为取决于页面的状态.Psuedo代码方式它是这样的:

Does the page have changes?
    If yes - prompt to save changes first
         If yes - save changes
         If no - exit function
    If no - continue
Prompt to confirm delete
    If yes - delete item and reload data
    If no - exit function

希望这是有道理的.基本上如果有变化,必须先保存数据.然后,如果数据已保存,或者如果没有开始更改,则提示用户确认删除.问题是我正在使用durandal和微风,我似乎无法将他们正确归还的承诺链接起来.

我的功能目前看起来像这样,我知道这是错误的,但我正在努力找出解决问题的方法.

if (this.hasChanges()) {
    app.showMessage('Changes must be saved before removing external accounts.  Would you like to save your changes now?', 'Unsaved Changes...', ['Yes', 'No'])
        .then(function (selectedOption) {
             if (selectedOption === 'Yes') {
                 return …

我目前正在评估Durandal在企业ASP.NET MVC应用程序中的使用.

但是,Durandal使用的默认约定似乎与我习以为常的MVC约定相冲突.

John Papa的HotTowel MVC模板非常棒,但是这也似乎通过将内容放在App文件夹中来"消除"MVC惯例而转向Durandals.

我对这些约定的几个问题是:

• 视图可能分为两个位置(/ App/views和/ Views).
• 脚本也分为两个位置(/ App/durandal和/ Scripts).
• 视图不在默认的MVC位置RazorViewEngine.

我宁愿保持每个元素包含在适当的MVC约定中,例如

/Controllers/
---- HomeController
---- AdminController

/Scripts/    
---- durandal/    
---- viewmodels/    
-------- Home
-------- Admin

/Views/    
---- Home    
---- Admin

我的问题是:

1. 是否可以配置Durandal来实现上述(或类似的)？

2. 冒险脱离默认的Durandal惯例是否明智？

3. 这样做有什么潜在的问题？

TL; DR为了查看Durandal单页面应用程序(SPA)中的某些页面,要求用户登录的好模式是什么？

我需要一个系统,如果用户试图导航到需要登录的"页面",则会将其重定向到登录页面.在此登录页面上成功进行身份验证后,我希望应用程序将它们重定向到之前尝试访问的页面,然后再将它们重定向到登录页面.

我可以想到的一种可以实现将用户重定向到登录页面和从登录页面重定向的方法是将URL存储到需要在浏览器历史记录中进行身份验证的页面,并且在成功进行身份验证之后,从以下位置导航回该历史记录项目.登录页面.

履行

我试图实现上述模式,但有一些问题.在main.js(或之前的任何地方router.activate())我保护需要身份验证的路由:

router.guardRoute = function (instance, instruction) {
    if (user.isAuthenticated()) {
        return true;
    } else {
        if (instance && typeof (instance.allowAnonymous) === "boolean") {
            if (!instance.allowAnonymous) {
                /* Use one of the following two methods to store an item in the
                   browser history. */

                /* Add guarded URL to the history and redirect to login page.
                 * We will navigate back to this URL after a successful login.
                 */
                if (history.pushState) …

我有一个现有的Durandal.js应用程序,它利用了所有ES5功能,但我想将它升级到新的Aurelia平台.什么是正确的升级路径？最简单的方法是尽可能地减少前面的最简单方法？是否有升级路径的文档？

我正在为我正在开发的应用程序构建多语言支持.在做了一些研究和阅读SO(国际化最佳实践)后,我试图以"框架友好"的方式将其整合.我现在所做的是:

创建的.resource模块格式如下:

resources.en-US.js

define(function () {
   return {
       helloWorlLabelText: "Hello world!"
   }
});

在app.start上,我获得了带有requirejs的资源模块,并将所有数据分配给app.resources.在每个模块内部,特定资源被分配给可观察对象,并通过文本绑定到标签和其他与文本相关的东西来绑定.像这样:

define(function (require) {
   var app = require('durandal/app'),
       router = require('durandal/plugins/router')
   };
   return{
       helloWorldLabelText: ko.observable(app.resources.helloWorldLabelText),

       canDeactivate: function () { 
      }
   }
});

On the view:

<label for="hello-world" data-bind="text: helloWorldLabelText"></label>

只需将新模块分配给app.resources即可交换资源.

现在问题是当语言被改变并且一些视图已经被渲染时,先前语言的值仍然存在.所以我最终在activate方法中重新分配了observable .还尝试将app.resources包装到observable中,但这也不起作用.

我不认为我最干净的方式,也许还有其他人可以分享其他方式.谢谢.

在淘汰库中启用延迟更新时遇到问题.我已经将Jquery数据表实现为一个组件,当导航到具有该组件的视图时,我可以看到按顺序调用以下方法.Getview>启动>附加

一切都按预期工作

但是,如果我按f5并刷新页面而不是从另一个页面导航到它,它会中断并调用以下方法

Getview>激活>附加> Getview>激活>附加>分离>分离(不知道为什么它最终被调用两次)并且它中断了,UI上根本没有显示任何表格,因为它不能从我能告诉的内容中呈现,我认为它与durandal过渡有关,并且导航到页面和刷新页面之间存在差异,有点抓住稻草.

这是一个为我复制问题的最小类,注意我没有这个组件的HTML文件我想使用getView方法从JQueryDT传入一些动态HTML

我创建了一个快速示例项目,只需要最少的时间来复制问题. https://bitbucket.org/dchosking1988/deferred-update-example

如果你拉动并运行它,你会看到刷新页面时"hello world"会消失,但如果你在标签之间导航则不会.

我用来复制这个问题的一般步骤是

1)下载示例项目

2)添加测试组件(请参阅上面的repo以获取示例文件)

3)启用延期更新

4)禁用视图缓存

4)尝试编写组件的新实例

编辑以提供更多信息

*这不是JQuery Datatable问题,它与以下内容一起复制

所以你不必下载gitRepo,这是我可以按照上述步骤在示例项目中复制问题的代码.

define([],
function () {
    var test = function () {
        var self = this;

        var defaultViewHtml = '<div> <h1>Hello World</h1></div>';
        var currentView = null;

        self.getView = function () {
            console.log('GetView');
            if (!currentView) {
                currentView = $(defaultViewHtml)[0];
            }
            return currentView;
        };

        self.activate = function (activateOptions) {
            console.log('Activate');
        };

        self.attached = function (view, parent, settings) {
            console.log('Attatched');
        };

        self.detached = function (view, …