web-dev-qa-db-ja.com

ページの初期化後にコンテンツが追加されるというjQuery Mobileレンダリングの問題

プロジェクトにjQuery MobileとBackbone JSを使用しています。 jQuery Mobileのイベント 'pagebeforeshow'を使用して正しいバックボーンビューをトリガーすることで、ほとんどが機能しています。その特定のjQuery Mobileページのバックボーンビューでは、必要な動的な処理をすべて行っています。ビューが行うことのいくつかは、アンダースコアのテンプレートシステムを使用して特定のビットを引き込むことです。

これは、テンプレートシステムを使用してフォームビットを取得するまで、すべて素晴らしいです。たとえば、動的なラジオボタンのセット（バックボーンコレクションから生成されます）。これらのラジオボタンは、jQuery Mobileが提供する機能を使用してスタイルを設定したいものです。現時点では、jQuery Mobileはこれらの動的に挿入されたラジオボタンを取得していません。以前にjQuery Mobileウィジェットの「slider（）」メソッドを呼び出すだけでスライダーを実行するときにこの問題を解決しましたが、それらを更新するように見えました...これらのラジオボタンの場合はそうではないようです。

バックボーンビューで、ウィジェットのメソッドをもう一度呼び出してみました。

$(this.el).find("input[type='radio']").checkboxradio();
$(this.el).find(":jqmData(role='controlgroup')").controlgroup();

他の方法でも試してみましたが、グループ化のスタイリングが機能するように、この方法で行う必要があるように見えました。しかし、これは正しくないようです。 ...これを行うと、ラジオボタンをクリックしたときに「初期化の前にチェックボックスラジオのメソッドを呼び出せません。メソッド 'refresh'を呼び出そうとしました」というエラーが発生しました。

JQuery Mobileには、ページまたは何かを再初期化する方法があるはずです。ソースコードに「ページ」ウィジェットがあることに気づきました。

JQuery Mobileは、ページが作成された後、DOMに挿入されるフォーム/要素をどのように処理しますか？それがフォームを構成する方法を処理するきれいな方法はありますか？ベースHTMLのデータ属性タグに依存することなく、フォームを呼び出して「jQuery Mobile方式」をレンダリングするためのクリーンな方法が必要ですか？

この問題への助けや洞察は大歓迎です...私は、Backbone JSとjQuery Mobileがうまく連携できるようにするというこの探求に大いに取り組んでいます。

ジェームス、ありがとう

javascriptjqueryjquery-mobilebackbone.js
18
littlejim84

更新

JQueryMobile beta2以降、これを行うイベントがあります。要素の.trigger('create')を使用すると、要素内のすべてが正しく描画されます。

重複しない別の質問ですが、10回以上投稿した回答が必要です:)

[古い答え]

.page()を試してください

私のよくある質問の詳細： http://jquerymobiledictionary.pl/faq.html

19
naugtur

これが役立つかどうかはわかりませんが、動的要素を追加するときに、成功したajax呼び出し自体で.page（）を使用していました（例 here および here ））が、期待どおりに機能しませんでした。 ajax呼び出しでは、要素（フォーム要素の場合）を更新して これらのドキュメント化されたメソッド を使用する方がよいことがわかりました。

  • チェックボックス：

    $("input[type='checkbox']").attr("checked",true).checkboxradio("refresh");

  • ラジオ：

    $("input[type='radio']").attr("checked",true).checkboxradio("refresh");

  • 選択：

    var myselect = $("select#foo");
myselect[0].selectedIndex = 3;
myselect.selectmenu("refresh");

  • スライダー：

    $("input[type=range]").val(60).slider("refresh");

  • フリップスイッチ（スライダーを使用）：

    var myswitch = $("select#bar");
myswitch[0].selectedIndex = 1;
myswitch .slider("refresh");

非フォーム要素を追加するには、.page（）を使用します

5
Phill Pafford

ページ全体を更新するとうまくいきました：

$('#pageId').page('destroy').page();
5
Jaime Botero

新しいコンテンツで要素の.trigger（ "create"）を呼び出してみてください。

2
Pavel Savara

JQuery Mobileが.trigger（ "create"）;をサポートするようになりました。これはあなたのためにこれを解決します

2
Rob Fuller

初期化後にJQMページを動的に更新する方法が必要でした。 「pagehide」イベント中に「page」というデータ属性を削除すると、次にJQMページが表示されたときに、ページが再初期化されることがわかりました。

$('#testing').live('pagehide', function (e) {
    $.removeData(e.target, 'page');
});
1
Scott Woodall

囲んでいるdiv要素で.trigger（ 'create'）を呼び出したとき、それは私のために働きました。以下の例をご覧ください。

.htmlファイル：

<div id="status-list" data-role="fieldcontain">
    <fieldset data-role="controlgroup">
        <legend>Choose as many snacks as you'd like:</legend>
            <input type="checkbox" name="checkbox-1a" id="checkbox-1a"/>
            <label for="checkbox-1a">Cheetos</label>
    </fieldset>
</div>

.jsファイル：

$("#status-list").trigger('create');
1
Jesper Bischoff-Jensen
$('#pageId').page('destroy').page();

生成されたコントロールグループ全体で機能します。無線入力の子はもちろんです。

-マイク

1
Michael Ellan

私にとっては、.page()のみが機能しました（.page('destroy')なしで）。

例えば。：

$('my-control-group-id').page();

アムノン

0
amnonkhen

私は少し話題から外れています。とにかくバックボーンがdiv内の要素をラップするため、jqmがinitで最初のデフォルトページdivを作成しないようにしたいと考えました。 DOMにページを動的に挿入してから、jqmを呼び出してそのクラスとウィジェットを作成したいと思っていました。私は最終的にこれをこのようにしました：

 <head>
 <script src="jquery-1.8.3.js"></script>
 <script type='javascript'>
 $(document).on("mobileinit", function () {  
 $.mobile.autoInitializePage = false;       
 }
 </script>
 <script src="jquery.mobile-1.3.0-beta.1.min.js"></script>
 </head>
 <body>
 ....... dynamically add your content ..........

 <script type='javascript'>
 $.mobile.initializePage() 
 </script>
 </body>

そして私の穴のjqm設定（jqm.jsの前に置く）

$(document).on("mobileinit", function () {
  $.mobile.ajaxEnabled = false;
  $.mobile.hashListeningEnabled = false;
  $.mobile.pushStateEnabled = false;
  $.mobile.linkBindingEnabled = false; // delegating all the events to chaplin
  $.mobile.changePage.defaults.changeHash = false;

  $.mobile.defaultDialogTransition = "none";
  $.mobile.defaultPageTransition = "slidedown";
  $.mobile.page.prototype.options.degradeInputs.date = true;
  $.mobile.page.prototype.options.domCache = false;
  $.mobile.autoInitializePage = false;

  $.mobile.ignoreContentEnabled=true;
});

これまでのところ、BackboneとJQMは問題なく機能しています。

0
zzart

enhanceWithin（）メソッドを使用してみてください。これは、jQuery Mobileを使用しているときは、jQueryオブジェクトのメソッドである必要があります。

0
Andree