在 jquery 的 pageshow 事件中调用 web api

Question

我正在编写一个基于 JqueryMobile 和 jquery 的 Web 应用程序。我的 index.html 中有三个数据页。我在第一页的数据页的 pageshow 事件中调用 web api 并填充列表视图。然后通过单击该列表获取该列表项的 id 并移至下一页并再次调用 web api 以获取页面显示事件中该列表项的详细信息。然后我再次从详细页面移动到第三页以调用另一个 api。一切正常，但是当我移回详细信息页面然后从详细信息页面到索引页面时，问题就来了。向后移动页面的 pageshow 事件再次调用，它再次调用所有页面中的 api。如果我使用 oncrete，那么它只会第一次调用 api。 任何人都可以告诉我如何在这种类型的结构中调用 api。

Answer 1

看看这个小提琴：

http://jsfiddle.net/ezanker/tAB7x/

---

有多种方法可以解决您的问题，这只是其中一种...

我已将用于填充初始列表的 web api 放在第一页的“pageinit”中。当您加载页面时，这将运行一个。如果您需要刷新此列表，您可以添加一个刷新按钮。列表中的每个附加项目都链接到 page2，其中包含项目 ID 的查询字符串。然后添加列表视图项的单击处理程序以获取单击项的 id 并从 web api 填写详细信息表单 (page2)（在示例中，我只是将 id 写入第 2 页中的文本框）。

$('#page1').on('pageinit', function () {

    //get list from web api (hardcoded for this example
    var $ul = $("#dynamicList");
    $ul.append('<li><a href="#page2?id=1" class="detailLink">A</a></li>');
    $ul.append('<li><a href="#page2?id=2" class="detailLink">B</a></li>');
    $ul.append('<li><a href="#page2?id=3" class="detailLink">C</a></li>');
    $ul.listview("refresh");

    $('.detailLink').on('click', function () {
      var l = $(this).attr("href");
      l = l.substring(l.indexOf('?') + 1);
      var id = getUrlVars(l);
      $('#detalText').val(id['id']);
    });
});

Page2 有一个链接到第 3 页的按钮和一个从 web api 填写第 3 页的点击处理程序（在示例中，我再次将 id 写入第 3 页的文本框）：

$('#linkPage2').on('click', function () {
    var id = $('#detalText').val();
    $('#detalText2').val(id);
});

当您单击任一页面上的后退按钮时，不会运行任何代码并保持页面的先前状态。