Где начать мобильное приложение Kendo в Дюрандале

Question

Я пытаюсь использовать мобильные виджеты Kendo внутри моего проекта PhoneGap Durandal. См источник образец проекта здесь: https://github.com/rodneyjoyce/DurandalKendoMobile/tree/master/App

Я не понимаю, куда поместить код initilisation Кендо (виджеты не делают без этого):

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

Я пытался поставить его в индекс .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 Посмотреть имеет следующий 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 не отображаются (это просто показывает «1 Заголовок 2» без CSS (т.е. Кендо не трансформирует их).

Все, кажется, связано с тем, как назвать это: kendoMobileApplication в Дюрандале.

я следовал указаниям Дюрандаль, чтобы дать Кендо привязок свое собственное пространство имен: http://durandaljs.com/documentation/KendoUI/

UPDATE 1

Я создал простой Durandal 1.2 проект, который выдвигает на первый план проблему с кэндо Mobile и Дюрандала (и PhoneGap, но неактуальны здесь)), а именно:

Единственный способ получить правильное отображение элементов управления для мобильных устройств - вызвать kendo.mobile.Application. Однако это не может найти правильный HTML-элемент, если он помещен в другой файл и загружен Durandal. Я не могу найти нужное место, чтобы поместить этот код инициализации, поскольку он выдает эту ошибку: «Непринятая ошибка: ваш элемент мобильного приложения kendo не содержит прямых дочерних элементов с атрибутом data-role =« view ». Убедитесь, что вы создаете экземпляр мобильного приложения с помощью правильного контейнера. »

kendoIndex.html не является Durandal, но показывает, как его следует визуализировать, если kendo.mobile.Application вызывается правильно (сначала запустите это, чтобы увидеть, что мы пытаясь достичь)

Shell: имеет макет Kendo, который не отображается. Домашний вид: имеет простой вид Kendo Mobile - это не получается. О: Простая HTML-страница без Kendo

Источник находится на 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 требует, чтобы элемент хоста и все элементы «вид» и «макет» были в 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, поскольку вы можете столкнуться с такими сбоями, как при создании своего приложения. Я сказал бы, что хотел бы услышать о вашем прогрессе :).