手動加載劍道移動視圖

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