手动加载剑道移动视图

Question

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

1. 剑道视图（根 html 外部）
2. 模式视图（在根 html 中）。

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

有没有办法：

1. 将模态视图存储在外部文件中？如果是这样，是否可以通过 javascript 语法 (app.navigate()) 而不是声明性语法 (href='externalmodal') 加载。
2. 无需先导航到外部视图即可手动预加载。

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

不要尝试设置选项 - Kendo 感到困惑（至少尝试设置 useNativeScrolling 不起作用，也不要尝试在子类上设置选项对象，除非您真的知道自己在做什么）。

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

这也是一种干净地继承 kendo.mobile.ui.View 的方法，效果很好——尽管你仍然必须使用data-role=view，即使你的子类是一个“不同的”组件。请注意，您不能只使用您自己的子类组件及其 own 名称（如 role=myview）来子类化视图，因为在 kendo 代码库中有专门针对 data-role=view 的硬编码检查.如果您希望子类化，则相同：布局 modalview 抽屉 splitview 页面（在其他硬编码的 kendo ui 组件名称中 - 搜索 kendo 代码以查找 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 的视图是否已经存在。始终需要唯一的 init 函数，因为它最终成为构造函数。

如果你想子类化一个模态视图，你需要根据剑道的工作方式做一些不同的事情：

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