标签: durandal

我在VS2012上获得了DurandalJS StarterKit模板...一切都很棒......

但在某些观点中我需要做类似的事情:

@if (Roles.IsUserInRole("Administrators"))
{
   <p>Test</p>
}

然而,对于durandal,我的所有观点都是'.html'文件......是否可以使用'.cshtml'文件来访问某些类似的信息？

或者还有其他办法与durandal一起做吗？

初级

可能是什么导致了这个？我正在使用DurandalJS项目,该项目可以在本地构建和运行.当我尝试部署到Azure网站时,该应用程序发布但在浏览器中失败:

无法加载资源:服务器响应状态为404(未找到) http://appsite.azurewebsites.net/Scripts/vendor.js?v=KJCisWMhJYMzhLi_jWQXizLj9vHeNGfm_1c-uTOfBOM1

我没有定制任何捆绑.

我的捆绑配置:

public class BundleConfig
{
    // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                    "~/Scripts/jquery-ui-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.unobtrusive*",
                    "~/Scripts/jquery.validate*"));

        // Use the development version of Modernizr to develop with and learn from. Then, when you're
        // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

        bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                    "~/Content/themes/base/jquery.ui.core.css",
                    "~/Content/themes/base/jquery.ui.resizable.css",
                    "~/Content/themes/base/jquery.ui.selectable.css",
                    "~/Content/themes/base/jquery.ui.accordion.css",
                    "~/Content/themes/base/jquery.ui.autocomplete.css",
                    "~/Content/themes/base/jquery.ui.button.css",
                    "~/Content/themes/base/jquery.ui.dialog.css", …

我花了好几个小时试图让我的durandal/knockout应用程序中的一个简单的事件调用正常工作.

上下文

我有一个用户可以从选择框中选择的语言列表:

    <select class="form-control select2"
        data-bind="event: { change: app.languageChanged }, options:languages,
        optionsText:'label',
        optionsValue:'code',
        value:app.selectedLanguage"></select>

app.selectedLanguage属性是一个ko.observable.我知道这是有效的,因为正确的项目被预选.

    this.selectedLanguage = ko.observable(options.defaultLanguage);

我还有一个事件处理程序,它监听该选择框上的更改,以便我可以向应用程序的其他需要通知的部分发送消息:

    languageChanged : function(data, event) {
        console.log(data);
        console.log(event);
        console.log(this.selectedLanguage());

        app.trigger('language:change', this.selectedLanguage());
    },

问题

1. 第一个参数'data'不包含所选项,而是包含所有项(实际上,它似乎是完整的当前视图模型).
2. 如果1.不起作用,那么它至少可以从可观察的"selectedLanguage"中获取新值.不幸的是,似乎总是有旧的价值.所以每当我更改selectbox选项时,我总是得到之前选择的值.

题

所以问题是:我能做错什么？我相信这通常是正常的,我必须在某处遗漏某些东西.

我以为我终于明白淘汰赛是如何运作的,但现在我遇到了下一个问题.如果有人可以帮助我,我将非常感激.

编辑[求助]

感谢xdumaine,这是(好的和简单的)解决方案:

在我的html模板中,我删除了更改事件:

    <select class="form-control select2"
        data-bind="options:languages,
        optionsText:'label',
        optionsValue:'code',
        value:app.selectedLanguage"></select>

在我的App视图模型中(我需要随处可见),我现在订阅了ko.observable而不是监听事件处理程序:

    define([ 'durandal/app', 'underscore', 'knockout', 'myapp/myapp' ], function(app, _, ko, myapp) {

        "use strict";

        function App(options) {

            if (!(this instanceof App)) {
                throw new TypeError("App constructor cannot be called as a …

我正在做一个durandal,breeze和knockout的应用程序.我已经开始实施一些测试了.我遇到的第一个问题是决定我应该测试什么,不测试什么.我知道我应该测试一切,但在一家小公司里并不总是可行的.

我的第二个问题是如何测试我对服务器的调用.我在微风页面上看到了一些关于测试的信息.我也见过DocCode示例.但我想知道更多关于如何做到这一点的意见.

我的问题是:

1. 我应该在微风电话中测试什么？
2. 我想测试一下,模仿后端.可能吗？任何例子？
3. 任何建议或评论都会很棒

我正在尝试使用grunt将SPA应用程序(requirejs,durandal 2,knockout)构建到单个main-build.js文件中,并且我遇到了durandal用于加载我的'text'插件的严重问题观点.

在开发中,我成功地使用'text'按照构建durandal应用程序的标准方式动态加载视图.不同之处在于我需要为视图做一些服务器端模板,因此它们实际上是动态生成的.

考虑到这一点,我想使用r.js将应用程序模型,视图模型和服务(通过grunt-durandal插件)打包到一个文件中,但不打包视图(.html)并仍然加载它们根据需要动态.

在我的grunt配置中,我正在使用该inlineText: false选项 - 我已经检查过它是否会抑制构建中的'text!*'模块.但是当我运行应用程序时,我得到了:

Uncaught TypeError: undefined is not a function从text.load以下行的内部:

var parsed = text.parseName(name),
            nonStripName = parsed.moduleName +
                (parsed.ext ? '.' + parsed.ext : ''),
            url = req.toUrl(nonStripName), // EXCEPTION THROWN HERE

正在加载的模块名称似乎是正确的(它是'text!*'one)但除此之外我不知道如何继续调试此问题.我究竟做错了什么？

我的咕噜声是:

/*global module, require */

module.exports = function (grunt) {
'use strict';

// library that allows config objects to be merged together
var mixIn = require('mout/object/mixIn');

var requireConfig = {
    baseUrl: 'App/',
    paths: {
        'jquery': '../Scripts/jquery-2.1.0',
        'knockout': …

我正在尝试设置注册和登录Hot Towel SPA应用程序.我已经基于asp.net单页面应用程序模板创建了SimpleMembershipFilters和ValidateHttpAntiForgeryTokenAttribute .

你怎么得到的

 @Html.AntiForgeryToken()

代码以Durandal SPA模式工作.

目前我有一个register.html

<section>
    <h2 data-bind="text: title"></h2>

    <label>Firstname:</label><input data-bind="value: firstName" type="text"  />
    <label>Lastname:</label><input data-bind="value: lastName" type="text"  />
    <label>Email:</label><input data-bind="value: emailAddress" type="text"  />
    <label>Company:</label><input data-bind="value: company" type="text"  />
    <br />
    <label>Password:</label><input data-bind="value: password1" type="password" />
    <label>Re-Enter Password:</label><input data-bind="value: password2" type="password" />
    <input type="button" value="Register" data-bind="click: registerUser" class="btn" />
</section>

register.js:

define(['services/logger'], function (logger) {
    var vm = {
        activate: activate,
        title: 'Register',
        firstName: ko.observable(),
        lastName: ko.observable(),
        emailAddress: ko.observable(),
        company: ko.observable(),
        password1: …

我正在使用Durandal,而Durandal又利用了Knockout.

我希望能够动态更改验证长度

小提琴

小提琴似乎与我的"工作"解决方案略有不同,但它仍然没有做我想要/期待的事情.

Viewmodel JS:

[尝试1]

define(function () {

   var self = this;

   self.userInfo = {       
        IdOrPassportNumber: ko.observable().extend({
            required: true,
            pattern: {
                message: 'A message',
                params: /some regex/
            }
        }),
        IdType: ko.observable()
    },

    self.isIdValid = ko.validatedObservable({ 
         IdOrPassportNumber: self.userInfo.IdOrPassportNumber 
    });

    self.userInfo.IdOrPassportNumber.subscribe(function (value) {
          if (isIdValid.isValid()) {
               console.log('YOLO!');
          }
    });

    self.userInfo.IdType.subscribe(function (value) {
        console.log(value);
        if (value === 'Passport') {
            self.userInfo.IdOrPassportNumber.extend({ maxLength: 15 });
        } else {
            self.userInfo.IdOrPassportNumber.extend({ maxLength: 13 });
        }
    });    

    var viewModel = {
        userInfo: self.userInfo
    };

    viewModel["errors"] …

是否有可能替换Durandal 2.0中的默认路由器行为来替换默认路由,例如:'mysite.com/#/myroute'与'mysite.com/#!/myroute'的原因是为了谷歌蜘蛛检测页面是ajax爬行能力,我需要在url中插入一个hashbang而不仅仅是一个hashtag.任何帮助将不胜感激.

谢谢!

我可以轻松地显示加载消息,而activate方法正在这样做:

        <div data-bind="compose:ActiveVm">
            <div class="text-center" style="margin : 75px">
                <i class="fa fa-spinner fa-spin"></i>
            </div>
        </div>

但是,如果我然后使用不同的viewmodel更新我的ActiveVm属性,则不会显示启动内容.我知道启动内容仅用于显示"初始"加载,但在从一个视图模型转换到另一个视图模型时,我有什么选项可用于显示此类消息？

请注意,此合成不参与路由...

更新:此处相关的durandal问题可能对未来访客有价值:https://github.com/BlueSpire/Durandal/issues/414

我正在尝试使用Typescript将Durandal与node.js服务器集成,以便在服务器端和客户端上定义模块.

我遇到的问题是Durandal强烈依赖于RequireJS和AMD风格的定义模块,我不想在服务器端引入,因为它使用RequireJS我没有任何机会运行CommonJS-ish模块在客户端上(node.js的默认值).

棺材中的最后一个问题是,我发现没有办法定义哪些文件应该编译为AMD模块,哪个文件作为CommonJS由tsc编写 - 这似乎是最简单的解决方案.

我不认为分离客户端部分和服务器部分是一种选择,因为很多代码对于这两个部分都是通用的.

所以,我的问题有三个:

• 有没有办法在相同的Typescript项目中混合AMD和CommonJS模块(最好使用NodejsTools)

• 如果没有,有没有办法强迫Durandal使用CommonJS文件来加载视图/视图模型等等

• 如果这一切都不可能,那么在node.js服务器上使用AMD模块是可能的(也是明智的)

任何想法都受到高度赞赏