Question

我正在开发一个Kendo Mobile项目，其中包括：

Kendo Views（root html外部）
模态视图（在根html中）。

外部文件按需加载，一切正常。但我希望对某些模态视图具有相同的按需加载行为，因为基于/的基于html的文件变得太大而且无法管理。

有没有办法：

将模态视图存储在外部文件中？如果可以，可以通过javascript语法（app.navigate（））而不是声明性语法（href ='externalmodal'）加载。
首先手动预加载外部视图而不导航到该视图。

Answer 1

此代码可让您手动创建视图：

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 for ModalView，替换视图进行模态查看，添加data-url，删除调用to show（），也许通过检查匹配data-url的元素来检查那个尚未创建的视图。我们还没有测试过设置角色。以这种方式查看，但我们在测试这些东西时做了类似的事情并且它有效。

不要尝试设置选项 - Kendo感到困惑（至少尝试设置useNativeScrolling没有工作，也不要尝试在子类上设置选项对象，除非你真的知道你是什么正在做。）

警告：创建browserHistory:false时，这是使用kendo.mobile.Application（禁用路由）。如果您使用有效的URL片段（与Kendo为pushstate / hashchange url创建的片段相同），则在使用浏览器历史记录时该技术仍然有效。

这也是干净利用kendo.mobile.ui.View的子类的一种方法 - 虽然你的子类是一个不同的＆＃34;但你必须仍然使用data-role=view。零件。请注意，您无法使用自己不能使用自己的拥有名称的子类组件（如role = myview）来对视图进行子类化，因为有专门针对data-role=view的硬编码检查在kendo代码库中。如果您希望子类，则相同：布局模态视图抽屉splitview页面（以及其他硬编码的kendo ui组件名称 - 用于kendo.roleSelector的搜索kendo代码 - 丑陋）。 e.g。

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 + "']");会查看网址是否已存在。始终需要一个唯一的init函数，因为它最终是构造函数。

如果你想要一个模态视图的子类，你需要做一些不同的事情，因为kendo的工作方式：

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

手动加载kendo移动视图

1 个答案: