1

Handlebars と jQuery Mobile を使用してカスタム MVC 構造を実装しています。ルーティングを手動で処理するために、2 つの jQM パラメータを無効にしました。

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

これらの 2 行は、jQuery Mobile のリンク バインディングとハッシュ リッスンを無効にします。以外のページ遷移を使用するまで、すべて正常に動作しているようですfade。リンク バインディングを再度有効にすると、ページ トランジションは機能し始めますが、おかしなことが起こり始めます (たとえば、Handlebars がコンパイルする前に jQM が HTML からこれを引き出すため、ページのタイトルが {{page}} として表示されます)。

何か案は？

<!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>
4

2 に答える 2

0

jqm 構造体でアニメーションを呼び出す方法と場所を書き直す必要があります。

pagebeforechange、pagebeforeload、pagebeforecreate など。ajax をオフにすると、この機能の多くが無効になります。問題を完全に解決する唯一の答えを見つけることはできないと思います。私たちもそれに苦労し、最終的に妥協点を見つけ、多くのテストを行って、テンプレート構造 (pure.js) との適切な使用方法を見つけなければなりませんでした。

于 2012-12-12T16:27:52.440 に答える
0

Jquery モバイル遷移は、ネイティブ アプリでうまく機能します。プラグインを使用すると、多くの歪みが生じます。本当にそのアニメーションが必要な場合は、プラグインを使用しないことをお勧めします.

于 2012-12-12T15:34:03.003 に答える