Kendo ui 在哪里初始化Durandal中的Kendo移动应用程序

我试图在我的PhoneGap Durandal项目中使用Kendo的移动小部件。 请参见此处的示例源项目：

我不明白剑道初始化代码应该放在哪里（如果没有这个，小部件就不会呈现）：

我曾尝试将其放入Index.html、shell.html和特定的Durandal页面视图（x.html）、shell.js、main、js和x.js中，但这些都不起作用

我的索引页中有以下链接：

    <script src="css/telerik/js/kendo.all.min.js"></script>
    <link href="css/telerik/styles/kendo.mobile.flat.min.css" rel="stylesheet" />

如果我不调用kendoMobileApplication，那么不会呈现Kendo Mobile小部件（它只显示没有CSS的“1 Title 2”（即Kendo没有转换它们）

一切似乎都取决于这个名字：Durandal的肯多瘤复制

我遵循Durandal准则为剑道绑定提供了自己的名称空间：

更新1

我创建了一个简单的Durandal 1.2项目，它突出了Kendo Mobile和Durandal（以及PhoneGap，但在这里不相关）的问题，即：

让移动控件正确渲染的唯一方法是调用kendo.Mobile.Application。但是，如果将HTML元素放入另一个文件并使用Durandal加载，则无法找到正确的HTML元素。 我找不到放置此初始化代码的正确位置，因为它抛出了以下错误：“未捕获错误：您的kendo mobile application元素不包含任何设置了data role=“view”属性的直接子元素。请确保使用正确的容器实例化移动应用程序。”

kendoIndex.html不是Durandal，但显示了如果正确调用kendo.mobile.Application，则应如何呈现它（首先运行此命令以查看我们试图实现的目标）

Shell：具有不会渲染的剑道布局。 主视图：具有简单的剑道移动视图–不会进行渲染。 关于：一个没有剑道的简单HTML页面

消息来源在Guthub上——如果有人能让Kendo Mobile与Durandal合作，我将不胜感激（或者至少确认这是不可能的（Telerik对此毫无帮助））。

---

这里有一个正在运行的演示，它显示了正确的开始屏幕，但没有显示导航单击时的“关于”视图。删除剑道或杜兰达尔的路由器功能可能需要一些额外的工作

要使它工作起来，需要做几件事。

Kendo要求宿主元素以及所有“视图”和“布局”元素都在DOM中，“视图”和“布局”是容器元素的子元素。更新视图html以反映这一点后，创建剑道应用程序的正确位置将是

home.js

define(function( require ) {
    var ctor = function() {

    };

    ctor.prototype.activate = function() {
        console.log("Home activate");
    };

    ctor.prototype.viewAttached = function() {
        var $kendoHost = $('#kendoHost');
        // Workaround for height = 0.
        // Additional code required to calculate on windows.resize
        $kendoHost.height($(window).height());
        this.app = new kendo.mobile.Application($kendoHost, {
            skin: "flat"
        });

        console.log("Home viewAttached", this.app, $kendoHost.height());

    };

    return ctor;
});

最后一个剑道将

kendoHost

高度确定为0，这会阻止正确渲染的视图显示。作为一个工作环境，我正在使用

$kendoHost.height（$（window.height（））在创建应用程序地址之前

正如我在上面的评论中所说的，我仍然不确定是否建议将这两个SPA框架结合起来，因为在构建应用程序时，您可能会遇到更多类似的小故障。也就是说，我很想听听你的进展：）。
这是一个正在运行的演示，它显示了正确的开始屏幕，但没有显示导航单击时的“关于”视图。删除剑道或杜兰达尔的路由器功能可能需要一些额外的工作


要使它工作起来，需要做几件事。

Kendo要求宿主元素以及所有“视图”和“布局”元素都在DOM中，“视图”和“布局”是容器元素的子元素。更新视图html以反映这一点后，创建剑道应用程序的正确位置将是
home.js

define(function( require ) {
    var ctor = function() {

    };

    ctor.prototype.activate = function() {
        console.log("Home activate");
    };

    ctor.prototype.viewAttached = function() {
        var $kendoHost = $('#kendoHost');
        // Workaround for height = 0.
        // Additional code required to calculate on windows.resize
        $kendoHost.height($(window).height());
        this.app = new kendo.mobile.Application($kendoHost, {
            skin: "flat"
        });

        console.log("Home viewAttached", this.app, $kendoHost.height());

    };

    return ctor;
});

最后一个剑道将
kendoHost
高度确定为0，这会阻止正确渲染的视图显示。作为一个工作环境，我正在使用
$kendoHost.height（$（window.height（））在创建应用程序地址之前

正如我在上面的评论中所说的，我仍然不确定是否建议将这两个SPA框架结合起来，因为在构建应用程序时，您可能会遇到更多类似的小故障。也就是说，我很想听听你的进展：）。
尝试将KendoUI.Mobile（一种具有自己布局/路线的水疗中心）和Durandal（另一种水疗中心）结合起来有什么好处？为了解决上面的子视图错误，请签出。视图容器封装在一个
div id='Rod'
中，因此应该用作选择器。不管怎样，我快速尝试了一下，当错误信息消失时，剑道应用程序仍然无法工作。好处：UI。我纯粹想要剑道手机的CSS样式。新的平面主题非常好（我混合使用棘轮/面漆等，我对CSS很糟糕）。我喜欢杜兰达尔和剑道看起来很棒，但它似乎没有整合（我需要关闭剑道的SPA部分）。出于兴趣，剑道的SPA部分与杜兰达尔相比如何？我喜欢Durandal（每个文件的视图和视图模型）的简单性和抽象性，但我似乎找不到将剑道应用程序分割成多个文件的方法——我不认为一个文件的方法适用于大型Javascript应用程序（我尝试了许多Jquery选择器的变体，所以我可能会保留一个旧的）-我也设法让它不抛出错误，但样式也不起作用…尝试将KendoUI.Mobile（一种具有自己布局/路线的水疗中心）和Durandal（另一种水疗中心）结合起来有什么好处？为了解决上面的子视图错误，请签出。视图容器封装在一个
div id='Rod'
中，因此应该用作选择器。不管怎样，我快速尝试了一下，当错误信息消失时，剑道应用程序仍然无法工作。好处：UI。我纯粹想要剑道手机的CSS样式。新的平面主题非常好（我混合使用棘轮/面漆等，我对CSS很糟糕）。我喜欢杜兰达尔，剑道看起来很棒
define(function (require)
{
    function viewModel()
    {

        var self = this;
        self.activate = activate;

        function activate()
        {
            //window.kendoMobileApplication = new kendo.mobile.Application($("#kendoindex"), {
            //    skin: "flat"
            //});
        }
    }

    var vm = new viewModel();
    return vm;
});

define(function( require ) {
    var ctor = function() {

    };

    ctor.prototype.activate = function() {
        console.log("Home activate");
    };

    ctor.prototype.viewAttached = function() {
        var $kendoHost = $('#kendoHost');
        // Workaround for height = 0.
        // Additional code required to calculate on windows.resize
        $kendoHost.height($(window).height());
        this.app = new kendo.mobile.Application($kendoHost, {
            skin: "flat"
        });

        console.log("Home viewAttached", this.app, $kendoHost.height());

    };

    return ctor;
});