手动加载剑道移动视图

Question

：

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下面的代码，使剑道创建子类（更改：替代View for ModalView，将视图替换为modalview，添加data-url，删除对show（）的调用，也许通过检查具有匹配数据url的元素来检查尚未创建的视图。我们没有测试过设置角色，用这种方式查看，但是我们在测试这些东西时做了类似的事情，并且工作正常。 （至少试图设置useNativeScrolling不起作用，除非你真的知道你在做什么，否则不要尝试在子类上设置选项对象）。不要尝试设置选项 - Kendo会感到困惑（至少试图设置useNativeScrolling不起作用，除非你真的知道你在做什么，否则不要尝试在子类上设置选项对象）。

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

这也是清除子类kendo.mobile.ui.View的一种方式，虽然你的子类是一个“不同的”组件，但它仍然可以使用data-role=view。请注意，您不能仅仅使用您自己的子类别组件，其名称为自己的名称，例如role = myview来为视图创建子类，因为在kendo代码库中专门为data-role=view设置了硬编码检查。如果您想要继承子类，则相同：layout modalview drawer splitview page（其他硬编码的kendo ui组件名称 - 用于搜索kendo.roleSelector的kendo代码 - 丑陋）。例如

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>'); 

为什么它的工作原理：在剑道源代码中的相关功能是_findViewElement这确实element = this.container.children("[" + attr("url") + "='" + urlPath + "']");，看看是否认为已经存在一个URL，创建一个新的人之前。始终需要一个独特的init函数，因为它最终成为构造函数。

如果您想子类modalview，你需要做不同的事情，由于路剑道作品：

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