jquery - 用于 hashbang 导航的 jQuery Mobile 和“查询参数”

Question

我正在使用 jQuery Mobile，并且在一个 HTML 页面中只有几页。打开这些页面时，我想为它们传递参数，以便它们的参数在 URL 中保持不变。

例如

  <a href="#map?x=4&y=2"

它会打开，我可以在 beforeshow 事件中访问参数 X 和 Y。

这可能吗？如何？您建议使用 hashbang 对参数进行编码的替代方法是什么？

Answer 1

我建议你不要使用散列“参数”，因为目前对它的支持是错误的。

我会拦截所有链接上的点击并查找特定的数据元素，例如数据参数：

    $('a').live('click',
        function(e) {
            var data = $(e.target).jqmData()
            globalParams = data.params !== null ? data.params : null
        }
    )

在你的 HTML 中你可以去

<a href="#map" data-params="x=4&y=2">....</a>

在这种情况下，您将创建一个名为params的全局变量，您应该能够从所有代码中以统一的方式访问该变量。

您将不得不自己解析这些参数，但这并不难，可以使用这样的东西：

function getCurrentParams() {

    if (!params) {
        return null
    }

    var res = {}
    $(params.split('&')).each(
        function(i, e) {
            var pair = e.split('=')
            if (pair.length !== 2) {
                return
            }
            res[pair[0]] = pair[1]
        }
    )

    return res
}

Answer 2

是的，您可以拥有像您展示的那样的链接：

<a href="#map?x=4&y=2"> Click here </a>

然后，在演出之前，您可以使用以下代码阅读此参数：

var params = QueryStringToHash(location.hash.substr(1));
//Now you can use params.x, params.y, etc

QueryStringToHash(got from here )的定义如下：

var QueryStringToHash = function QueryStringToHash  (query) {
  var query_string = {};
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
    pair[0] = decodeURIComponent(pair[0]);
    pair[1] = decodeURIComponent(pair[1]);
        // If first entry with this name
    if (typeof query_string[pair[0]] === "undefined") {
      query_string[pair[0]] = pair[1];
        // If second entry with this name
    } else if (typeof query_string[pair[0]] === "string") {
      var arr = [ query_string[pair[0]], pair[1] ];
      query_string[pair[0]] = arr;
        // If third or later entry with this name
    } else {
      query_string[pair[0]].push(pair[1]);
    }
  } 
  return query_string;
};

希望这可以帮助。干杯

Answer 3

您是否查看过 jQuery 移动常见问题解答？-> http://jquerymobile.com/test/docs/faq/pass-query-params-to-page.php

我目前正在使用：https ://github.com/azicchetti/jquerymobile-router