jQuery mobile：移动增强之前的 json 处理

Question

我开始使用 jQuery Mobile 开发移动应用程序。这个想法是构建 HTML 静态页面，并在显示它们之前调用服务器以获取输入标签和按钮的 i18n 文本。我使用特殊属性标记容易更改内部文本的 HTML 元素：“data-i18n”：

对于标签：

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

对于按钮：

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

我使用 JSON 调用服务器：

$('#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 不不要修改这些 HTML 元素。问题出在按钮上，因为 JQM 隐藏了我定义的按钮，并创建了一个新的跨度来呈现按钮。当我读取 JSON 结果时，我可以找到并更改我定义的按钮，但不能找到并更改 JQM 创建的新范围，因此屏幕上显示的文本是旧文本：“login.submit”。

有没有办法在 JQM 更改 HTML 代码之前执行 JSON 调用？

PD：不动态构建整个 HTML 页面（包括 i18n 文本）的原因是，将来我想用 PhoneGap 或类似的 shell 封装 Web 应用程序，并且我想在里面分发 HTML 页面、CSS 和脚本应用程序，并最大限度地减少与服务器的数据流量。

预先感谢：

卡洛斯。

编辑：更改文本后调用 $scope.trigger('create') 无法解决问题。

Answer 1

最后，我自己找到了解决问题的方法，捕获了事件“pagebeforecreate”。

我在需要国际化的每个页面上调用此函数，传递我需要调用的服务器操作和页面 id：

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});
  });
}

请注意，我强制使用对服务器的同步调用，以避免页面移动增强之前i18n 文本已准备就绪。

这是在 json 回调中调用的函数：

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

该函数查找所有 i18n 元素并使用翻译后的文本覆盖其内部 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 只是视图。 i18n 资源是使用 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 应用程序的最佳方式。任何建议将不胜感激。

Answer 2

您可以使用 ui-btn-text 类更改 元素的文本：

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

或者如果您不确定该元素是否已初始化通过 jQuery Mobile，您可以首先检查 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);
}