4

だから、タイトルはかなり自明です。jQuery モバイルとハンドルバーを使用しようとしていますが、ハンドルバーによって生成されるテーブルまたはリストビューの CSS に問題があります。CSS が無視されるようです。

編集: これが実際のライブの例です: http://jsbin.com/adurar/1/edit

セクションには<head>、次のコードがあります。

<script id="articles-template" type="text/x-handlebars-template">
<ul data-role="listview" data-autodividers="true"  data-filter="true" data-inset="true">
  {{#entries}} 
    <li><a href="#" onClick="">{{msg}}</a></li>
  {{/entries}}
</ul>
</script>

HTML の本文は非常に単純な jquery mobile です。

<div data-role="page" data-theme="b">

    <div data-role="header">
        <h1>Page Title</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <p>
          <div id="articleHandlebars" data-demo-html="true"></div>
        </p>        
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

.js ファイルには、次のコードがあります。

function showData(data)
{
  var source   = $("#articles-template").html();
  var template = Handlebars.compile(source);
  var html = template(data);
  $("#articleHandlebars").html(html);   
 }

私もこれを無駄に追加しようとしました:

$("#articleHandlebars").trigger('create');
$("#articleHandlebars").listview('refresh');

どんな種類の助けも大歓迎です！

4

4 に答える 4

0

JSON 応答を追加した後、この構文を使用します

$("your_list_view_id").listview('refresh');

于 2013-07-25T02:23:31.033 に答える
0

jQuery Mobile (1.4.1) でハンドルバー (1.3.0) を使用する際の注意点は、実際のプロジェクトで使用した後の経験に基づいています。

技術的には期待どおりに機能し、jQuery Mobile が提供する任意のコンポーネントを使用して、必要な任意の UI を実装できます。

ただし、クライアント側で必要な二重レンダリングが原因で発生する、いくつかのパフォーマンスの問題に直面しました。

  1. jQuery Mobile ドキュメントで提案されているように、ハンドルバー テンプレートを使用してマークアップを生成しました。
  2. このレンダリング プロセスの後.trigger("create");、jQuery Mobile の「強化」プロセスを開始します。

このアプローチを使用すると、バックエンドの REST サービスが非常に高速 (この場合は 20 ～ 35 ミリ秒) に応答したとしても、ブラウザーのパフォーマンスは良くありません。

于 2014-02-24T13:25:46.463 に答える