jQueryモバイル：モバイル拡張前のjson処理

Question

jQuery Mobileを使用してモバイルアプリケーションを開発し始めています。 HTML静的ページを作成して表示する前に、サーバーに電話をかけて、入力ラベルとボタンのi18nテキストを取得します。ボタンについて

<label data-i18n="login.username" for="loginPaciente.username">login.username</label> 

：ラベルの

： "データ-I18N"：私は、特別な属性を持つ内部テキストを変更することが影響を受けやすいHTML要素をマーク

<button data-i18n="login.submit" type="submit" data-theme="a">login.submit</button> 

$('#pageLogin').live('pagebeforeshow',function(event, ui){ 
      var action = "/MyServerApp/namespace1/mobile_Action_Login_configPage.action"; 
      $.getJSON(action, function(data) { 
       var resources = data.i18n_resources; 
       var id, text; 
       var $scope = $('#pageLogin'); 
       for (i=0; i<resources.length; i++){ 
        id = resources[i].id; 
        text = resources[i].text; 
        $scope.find('[data-i18n="' + id + '"]').html(text); 
       } 
      }); 
    }); 

JQMはmodifではないので、これはラベルと完全に一致しますこれらのHTML要素。 JQMは私が定義したボタンを隠し、ボタンをレンダリングするための新しいスパンを作成するので、ボタンに問題があります。 JSONの結果を読むと、私が定義したボタンを見つけて変更することができますが、JQMが作成した新しいスパンではないので、画面に表示されるテキストは古いものです： "login.submit"。

JQMがHTMLコードを変更する前にJSON呼び出しを実行する方法はありますか？

PD：HTMLページ全体を動的に（i18nテキストを含めて）構築しない理由は、今後、WebアプリケーションをPhoneGapなどのシェルでカプセル化してHTMLページを配布したいからです。アプリケーション内のCSSとスクリプトを使用して、サーバーとのデータトラフィックを最小限に抑えます。事前に

ありがとう：

カルロス。

EDIT：テキストを変更してから$scope.trigger('create')を呼び出しても問題は解決しません。

Answer 1

あなただけのui-btn-textクラスに<span>要素のテキストを変更することができます。

$scope.find('[data-i18n="' + id + '"]').find('.ui-btn-text').html(text); 

または要素は、jQueryのモバイルによって初期化されていますかどうかわからない場合、あなたはの存在を確認することができますui-btn-class最初：

var $btn_text = $scope.find('[data-i18n="' + id + '"]').find('.ui-btn-text'); 
if ($btn_text.length > 0) { 
    $btn_text.html(text); 
} else { 
    $scope.find('[data-i18n="' + id + '"]').html(text); 
} 

Answer 2

は最後に、私は、イベント「pagebeforecreate」をキャッチ、自分で自分の問題の解決策を見つけました。で、私は、サーバーへの同期呼び出しを使用するように強制

function utils_loadConfigPage(action, pageid){ 
    $(document).bind("pagebeforecreate", function(){ 
    var $page = $('#' + pageid); 
    var _action = action; 
    var paramCallback = "jsoncallback=?"; 
    var concat = "?"; 
    if (_action.indexOf("?")!=-1){ 
     concat = "&"; 
    } 
    _action += concat + paramCallback; 
    $.ajaxSetup({"async": false}); 
    $.getJSON(_action, function(data){ 
     utilis_doConfigPage(data, $page); 
    }); 
    $.ajaxSetup({"async": true}); 
    }); 
} 

注：

私が呼び出す必要があり、サーバーアクションとページIDを渡し、私は国際化する必要がある各ページでこの機能を呼び出しますi18nのテキストの準備が整う前にページのモバイル機能を向上させることを避けるためです。

これはJSONコールバックに呼び出される関数です。

function utils_doConfigPage(data, $scope){ 
    utils_seti18nTexts(data, $scope); 
    utils_setPlaceholders($scope); 
} 

この機能は、すべての国際化の要素を検索し、翻訳された文章で自分の内側のhtmlを上書き：

function utils_seti18nTexts(data, $scope){ 

    var resources = data.i18n_resources; 
    var id, text; 
    for (i=0; i<resources.length; i++){ 
    id = resources[i].id; 
    text = resources[i].text; 
    $scope.find('[data-i18n="' + id + '"]').html(text); 
    } 
} 

この関数のオーバーライド入力のプレースホルダテキスト：

function utils_setPlaceholders($scope){ 

    $scope.find('div[data-role="fieldcontain"].ui-hide-label').each(function(){ 
     var textLabel = $(this).find('label').html(); 
     $(this).find('.placeholder').attr('placeholder', textLabel); 
    }); 
} 

最後に、i18nリソースを生成するjspです。 Struts2を使用しているため、jspは直接呼び出されません。私はアクションを呼び出し、JSPはビューだけです。国際化リソースは、Struts2の機能を使用して取得されています

<%@ page contentType="application/json; charset=UTF-8" pageEncoding="UTF-8" %> 
<%@ taglib prefix="s" uri="/struts-tags"%> 
<s:property value="jsoncallback" />({ 
"i18n_resources": 
    [ 
     { 
      "id" : "MOBILE_APP_NAME", 
      "text" : "<s:text name="APP_NAME" />" 
     } 
     ,{ 
      "id" : "TITLE_LOGIN", 
      "text" : "<s:text name="TITLE_LOGIN" />" 
     } 
     ,{ 
      "id" : "LOGIN_USERNAME", 
      "text" : "<s:text name="LOGIN_USERNAME" />" 
     } 
     ,{ 
      "id" : "LOGIN_PASSWORD", 
      "text" : "<s:text name="LOGIN_PASSWORD" />" 
     } 
     ,{ 
      "id" : "BUTTON_OK", 
      "text" : "<s:text name="BUTTON_OK" />" 
     } 
     ,{ 
      "id" : "MOBILE_APP_FOOTER", 
      "text" : "<s:text name="MOBILE_APP_FOOTER" />" 
     } 
    ] 
}) 

これはJQMアプリケーションを国際化するための最良の方法である場合、私は知りません。どんな提案も感謝します。