Durandal莫代尔无法找到视图

时间:2013-06-13 20:40:02

标签: durandal

我有一个从按钮调用的模态对话框。一切似乎工作正常,除了我必须将cancelconfirm.html放在viewconfode目录中的cancelconfirm.js文件或它找不到html文件。它正在查看viewmodels目录。

我认为这是我调用showModal()的方式,但我在想,因为我在路由器中使用durandal会知道在哪里查找视图?

app.showModal('areas/share/viewmodels/cancelconfirm')

刚开始durandal,我错过了什么?

由于

这是我的代码设置viewLocator和app root

    viewLocator.useConvention('../../areas/share/viewmodels', '../../areas/share/views', '../../areas/share/views');

        // show the app start view model
        app.setRoot('../../areas/share/viewmodels/shell', 'entrance');


    define(function() {
    var app = require('durandal/app');
    var logger = require('logger/logger');
    var router = require('durandal/plugins/router');


    function Share(email, downloadProxy, downloadMaster, comment, alertUser) {
        this.email = email;
        this.downloadProxy = ko.observable(downloadProxy);
        this.downloadMaster = ko.observable(downloadMaster);
        this.comment = ko.observable(comment);
        this.alertUser = ko.observable(alertUser);
    }

    var shares = ko.observableArray();  // change this variable to recipients
    var shareId = ko.observable();
    var emailValidator = $("#email").kendoValidator().data("kendoValidator");    

    var addRecipient = function() {
        emailValidator = $("#email").kendoValidator().data("kendoValidator");

        if (emailValidator.validate()) {


            logger.log("valid email address", "", "adding to share", false);
            var newShare = new Share(email.value, false, false, false, false);
            shares.push(newShare);
            emailValidator.hideMessages();                      
        }
    };

    function resetEmail() {   
        email.value = "";
        emailValidator.hideMessages();       
    }    

    var selectAll = function(share, event) {
         logger.log(share, "", "select all", false);
         if (event.currentTarget.checked == true) {
             share.downloadProxy(true);
             share.downloadMaster(true);
             share.comment(true);
             share.alertUser(true);
         } else {
             share.downloadProxy(false);
             share.downloadMaster(false);
             share.comment(false);
             share.alertUser(false);
         }

         return true;
     };

    var next = function() {
        router.navigateTo("#/share/" + shareId + "/settings");
    };

    var previous = function() {
        router.navigateTo("#/share/" + shareId + "/files");
    };

    var cancel = function() {
        app.showModal('areas/share/viewmodels/cancelconfirm').then(function(dialogResult){
            // add the storing of the user pref dontShow later
            // cookie or true preference?
            if(dialogResult.answer == 'Yes') {
                window.location.assign("asset");                                
            }
        });
    };      

    return {        
        shares : shares,
        addRecipient : addRecipient,
        selectAll : selectAll,
        resetEmail : resetEmail,        
        next : next,
        previous : previous,
        cancel : cancel,
        activate : function(context) {
            //app.showMessage("Share ==> " + shares()[0].email);
            shareId = context.id;
        }
    };
});

此要求现在正在使用您建议的方法:

仍在查找viewmodels目录中的视图文件。 未捕获错误:/SkyTrack/resources/areas/share/viewmodels/cancelconfirm.html HTTP状态:404

以下是我在main.js中的require config:

require.config({
    baseUrl: "/SkyTrack/resources/",
paths: {
    text: 'core/durandal/amd/text',
    durandal: "core/durandal",
    logger: "core/services",
    cancelconfirm: "areas/share/viewmodels"         
    }
});

调用模态的文件顶部的define块:     define(function(){         var app = require('durandal / app');         var logger = require('logger / logger');         var router = require('durandal / plugins / router');         var cancelconfirm = require('cancelconfirm / cancelconfirm');

调用模态

的函数
   var cancel = function() {        
        app.showModal(cancelconfirm).then(function(dialogResult){               
            // add the storing of the user pref dontShow later
            // cookie or true preference?
            if(dialogResult.answer == 'Yes') {
                window.location.assign("asset");                                
            }
        });
    };          

我还必须在shell.js的顶部添加require (我不明白为什么,但直到我做到了,我才得到“尚未加载上下文:_。” 误差)

以下是shell.js的完整内容:

define(function (require) {
    var router = require('durandal/plugins/router');
    var logger = require('logger/logger');
    var cancelconfirm = require('cancelconfirm/cancelconfirm');    

    return {
        router : router,
        activate : function () {
            logger.log("shell init activate share", "", "share shell", false);

            //router.mapNav("addshare");
            router.mapNav("files");
            router.mapNav("recipients");
            router.mapNav("settings");
            router.mapNav('cancelconfirm');            

            //allows regular links to work (so you can navigate between multiple SPA's)
            Sammy.Application.prototype.disable_push_state = true;
            return router.activate('files');
        }
    };
});

** * ** * ** * 的**** main.js的列表

require.config({
      baseUrl: "/SkyTrack/resources/",
    paths: {
        text: 'core/durandal/amd/text',
        durandal: "core/durandal",
        logger: "core/services",
        cancelconfirm: "areas/share/viewmodels/cancelconfirm"           
    }
});


define(function (require) {
    var app = require('durandal/app'),
    viewLocator = require('durandal/viewLocator'),
    viewModelBinder = require('durandal/viewModelBinder'),
    system = require('durandal/system'),
    router = require('durandal/plugins/router'),
    logger = require('logger/logger');

    system.debug(true);

    logger.log("using durandal", "", "main", false);
    app.title = "Share My Assets";

    app.start().then(function () {

        // kendo configuration 
        // Configure kendo data binding attribute prefix
        kendo.ns = "kendo-";
        logger.log("Configured kendo data binding prefix = 'data-kendo-*'", "", "main", false);

        // Add Durandal beforeBind event handler that will apply
        // Kendo data binding every time a viewModel is bound to a view
        viewModelBinder.beforeBind = function (viewModel, view) {
        logger.log("Applying Kendo data binding", "", "viewModelBinder", false);

            // Find all Kendo templates and add to the DOM before
            // bind is called
            var templates = $("script[type='text/x-kendo-template']", view);
            templates.each(function(i,item){
                $(document.body).append(item);
            });

            try
            {
                if(viewModel.kendoViewModelPropertyName != null)
                {
                    kendo.bind(view, viewModel[viewModel.kendoViewModelPropertyName]);
                }
                else
                {
                    kendo.bind(view, viewModel);
                }
            }
            catch(e)
            {
                logger.log("Error applying kendo MVVM bindings: " + e.message);
            }

        };



        // configure routing
        router.useConvention('../../areas/share/viewmodels');
        viewLocator.useConvention('../../areas/share/viewmodels', '../../areas/share/views', '../../areas/share/views');

        app.adaptToDevice();

        // show the app start view model
        app.setRoot('../../areas/share/viewmodels/shell', 'entrance');
    });

});

1 个答案:

答案 0 :(得分:1)

请尝试使用此方法:

var cancelconfirm = require('cancelconfirm');
app.showModal(cancelconfirm);

使用这种方法,您将加载视图模型并将其传递给showModal调用。然后,showModal将使用viewLocator来查找与视图模型关联的视图。通过这种方式,您并不是非常依赖durandal来找到合适的视图模型,而是允许requirejs为您加载模块,让出售的durandal找到视图。