在 Durandal 中在哪里启动 Kendo 移动应用程序

Question

我正在尝试在我的 PhoneGap Durandal 项目中使用 Kendo 的 Mobile 小部件。 在此处查看示例源项目：https://github.com/rodneyjoyce/DurandalKendoMobile/tree/master/App

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

    window.kendoMobileApplication = new kendo.mobile.Application($(document.body), {
        skin: "flat"
    });

我尝试将其放入 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" />

我的 Durandal View 具有以下带有 Kendo Mobile 小部件的 HTML：

<section>
    1
    <div id="kendoindex">
        <div data-kendo-role="view" data-kendo-title="View">
            <header data-kendo-role="header">
                <div data-kendo-role="navbar">
                    <span data-kendo-role="view-title">Title</span>
                </div>
            </header>
            <ul data-kendo-role="listview">
                <li>Item 1</li>
                <li>Item 2</li>
            </ul>
        </div>
    </div>
    2
</section>

和我的 ViewModel 这个视图：

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;
});

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

一切似乎都取决于在哪里调用它：Durandal 中的 kendoMobileApplication。

我遵循 Durandal 指南为 Kendo 绑定提供了自己的命名空间：http://durandaljs.com/documentation/KendoUI/

更新 1

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

让移动控件正确呈现的唯一方法是调用 kendo.mobile.Application。但是，如果将其放入不同的文件并使用 Durandal 加载，则无法找到正确的 HTML 元素。 我找不到放置此初始化代码的正确位置，因为它会引发此错误：“未捕获的错误：您的 kendo 移动应用程序元素不包含任何具有 data-role="view" 属性集的直接子元素。确保使用正确的容器实例化移动应用程序。”

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

Shell：具有未渲染的 Kendo 布局。 主页视图：具有简单的 Kendo Mobile 视图 - 这不会被渲染。 关于：一个没有剑道的简单 HTML 页面

来源在 Guthub - 如果有人可以让 Kendo Mobile 与 Durandal 合作，我将不胜感激（或者至少确认它是否不可能（Telerik 对此毫无帮助））。 https://github.com/rodneyjoyce/DurandalKendoMobile/tree/master/App

Answer 1

这是一个工作演示，它显示了正确的开始屏幕，但没有显示导航点击的关于视图。移除剑道或 Durandal 的路由器功能可能需要做一些额外的工作。

http://rainerat.spirit.de/DurandalKendoMobile/App/#/

要让它发挥作用，需要做几件事。 https://github.com/RainerAtSpirit/DurandalKendoMobile/commits/master

Kendo 要求宿主元素和所有 'view' 和 'layout' 元素都在 DOM 中，并且 'view' 和 'layout' 是容器元素的子元素。在更新视图 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 框架结合起来，因为在构建应用程序时可能会遇到更多类似的故障。那就是说我很想听听你的进展:)。