Вручную загрузить мобильное представление кендо

Этот код позволяет вручную создать представление:

var viewUrl = 'blahblahblah';
var element = $.parseHTML('<div data-role=view>test</div>')[0];
element.style.display = 'none';
$(document.body).append(element);
var options = $.extend({}, kendo.parseOptions(element, kendo.mobile.ui.View.fn.options));
var view = new kendo.mobile.ui.View(element, options);
view.element[0].setAttribute('data-url', viewUrl);
kendo.mobile.application.navigate(viewUrl, '');

В зависимости от того, какие функции вы используете, вам может потребоваться вместо этого использовать код, аналогичный тому, который используется для ModalView ниже, чтобы Kendo создал подкласс (изменения: замена View на ModalView, замена view на modalview, добавление URL-адреса данных, удаление вызова show( ), возможно, проверьте, что представление еще не создано, проверив элемент с соответствующим URL-адресом данных). Мы не тестировали установку role.view таким образом, но мы сделали что-то подобное во время тестирования этого материала, и это сработало.

Не пытайтесь устанавливать параметры - Кендо запутался (по крайней мере, попытка установить useNativeScrolling не сработала, также не пытайтесь устанавливать объект параметров в подклассе, если вы действительно не знаете, что делаете).

Предостережение: при создании kendo.mobile.Application использовалось browserHistory:false (что отключает маршрутизацию). Этот метод должен по-прежнему работать при использовании истории браузера, если вы используете действительный фрагмент URL-адреса (так же, как будет создано Kendo для URL-адреса pushstate/hashchange).

Это также способ чистого подкласса kendo.mobile.ui.View, который хорошо работает, хотя вы все равно должны использовать data-role=view, даже если ваш подкласс является «другим» компонентом. Обратите внимание, что вы не можете просто использовать свой собственный компонент подкласса с его собственным именем, например role=myview, для подкласса представления, потому что в кодовой базе кендо есть жестко закодированные проверки специально для data-role=view. То же самое, если вы хотите создать подкласс: layout modalview drawer splitview page (среди других жестко запрограммированных имен компонентов пользовательского интерфейса кендо — поиск кода кендо для kendo.roleSelector — уродливый). например

MyView = kendo.mobile.ui.View.extend({
    init: function(element, options) {
        kendo.mobile.ui.View.prototype.init.apply(this, arguments);
        ...

var myView = new MyView('<div data-role=view>test</div>');

Почему это работает? Соответствующая функция в исходном коде Kendo — _findViewElement, которая делает element = this.container.children("[" + attr("url") + "='" + urlPath + "']");, чтобы увидеть, существует ли представление для URL-адреса, перед созданием нового. Всегда требуется уникальная функция инициализации, поскольку в конечном итоге она становится функцией-конструктором.

Если вы хотите создать подкласс модального представления, вам нужно сделать что-то другое из-за того, как работает кендо:

var MyModalView = kendo.mobile.ui.ModalView.extend({
  html: '<div data-role=modalview style="width:90%;display:none;">Foobar</div>',
  init: function() {
    kendo.mobile.ui.ModalView.prototype.init.apply(this, arguments); 
  }
});

function makeModalView() {
  $(document.body).append($.parseHTML(MyModalView.prototype.html));
  var roles = $.extend({}, kendo.mobile.ui.roles);
  roles.modalview = MyModalView;
  var modalView = kendo.initWidget($(element), {}, roles);
  modalView.open();
  return modalView;
}