jQuery Mobile頁面轉換不起作用

我正在使用Handlebars和jQuery Mobile實現自定義MVC結構。爲了處理手動路由，我已經停用2個JQM參數：jQuery Mobile頁面轉換不起作用

$.mobile.linkBindingEnabled = false; 
$.mobile.hashListeningEnabled = false;

這兩行禁用jQuery Mobile的鏈路捆綁和哈希聽。似乎一切正常，直到我想使用fade以外的頁面轉換。當我重新啓用鏈接綁定時，頁面轉換開始工作，但有趣的事情開始發生（例如頁面的標題顯示爲{{page}}，因爲jQuery在將Handlebars編譯之前將其從HTML中拉出）。

任何想法？

<!DOCTYPE html> 
<html> 
<head> 
    <link href="/styles/jquery.mobile.css" rel="stylesheet" > 
    <script src="/script/jquery.js" type="text/javascript"></script> 
    <script src="/script/jquery.mobile.js" type="text/javascript"></script> 
    <script src="/script/handlebars.js" type="text/javascript"></script> 
</head> 
<body> 

<div id="one" data-role="page"> 
    <div data-role="header"><h1>{{page}}</h1></div> 
    <div data-role="content"> 
    <p> 
     {{content}} 
     <a href="#two" data-role="button" data-transition="slide">Two</a> 
    </p> 
    </div> 
</div> 

<div id="two" data-role="page"> 
    <div data-role="header"><h1>{{page}}</h1></div> 
    <div data-role="content"> 
    <p> 
     {{content}} 
     <a href="#one" data-role="button" data-transition="slide">One</a> 
    </p> 
    </div> 
</div> 

<script> 
var count = 0; 
function one() { 
    return({page: 'One', content: 'One is the loneliest number.'}); 
} 

function two() { 
    return({page: 'Two', content: 'Two is company.'}); 
} 

// Handle link binding and hash changes manually 
$.mobile.linkBindingEnabled = false; 
$.mobile.hashListeningEnabled = false; 

// Router 
$(window).bind('load hashchange', function() { 
    var hash = '#one'; 
    if (location.hash.length > 0) { 
    hash = location.hash; 
    } 
    var source = $(hash).html(); 
    var template = Handlebars.compile(source); 
    var html = template(window[hash.substring(1, hash.length)]()); 
    $(hash).html(html); 
    $.mobile.changePage(hash); 
}); 

</script> 

</body> 
</html>

來源

2012-12-12 David Jones

您真的需要重新考慮重寫jqm結構中調用動畫的方式和位置。

pagebeforechange，pagebeforeload，pagebeforecreate等等。如果你已經關閉了ajax，你將禁用很多這個功能。我不認爲你會找到一個能夠徹底解決你的問題的單一答案。我們也一直在努力，最終不得不找到一個妥協方案和大量的測試，以找到正確的用法與模板結構（pure.js）的結合。

來源

2012-12-12 16:27:52 imaginethepoet

Jquery移動轉換在原生應用程序中運行良好。使用插件會導致很多失真。如果你真的想要這個動畫，我建議你不要使用任何插件。

來源

2012-12-12 15:34:03 iOSAndroidWindowsMobileAppsDev

我真的不認爲這是一個實際的答案。你是說如果你使用jQuery Mobile，你不能使用任何jQuery插件？ –

你可以，但過渡是非常錯誤的。我嘗試使用插件與電話差距/科爾多瓦和唯一一個工作是滑動之間的過渡，並不看起來很酷，所以我最終放手，當我沒有科爾多瓦測試，它的工作。你可以嘗試聆聽pagebeforeshow和頁面隱藏並且沒有固定頭文件，但是使用插件進行調試非常困難，因爲您有其他模板可以確定您的頁面如何與本機應用程序不同，您知道自己做了什麼並且可以輕鬆消除錯誤。 – iOSAndroidWindowsMobileAppsDev

jQuery Mobile頁面轉換不起作用

回答

相關問題