Question

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

我不明白在哪里放置Kendo初始化代码（如果没有这个，小部件就不会渲染）：

    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，但这里不相关）的问题，即：

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

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

Shell：具有无法呈现的Kendo布局。主视图：具有简单的Kendo Mobile视图 - 这不会被渲染。关于：没有Kendo的简单HTML页面

来源是Guthub - 如果有人能让Kendo Mobile与Durandal合作我会很感激（或者至少确认一下是不可能的）（Telerik对此没有任何帮助））。 https://github.com/rodneyjoyce/DurandalKendoMobile/tree/master/App

Answer 1

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

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

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

Kendo要求host元素和所有'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框架结合起来，因为在构建应用程序时可能会遇到更多这样的故障。那说我很想听听你的进展:)。

在Durandal中启动Kendo移动应用程序的位置

1 个答案: