JQuery Mobile - 如何将数据上下文从列表视图项传递到另一个页面？答案

【问题标题】：JQuery Mobile - How can I pass data context from a listview item to another page?JQuery Mobile - 如何将数据上下文从列表视图项传递到另一个页面？
【发布时间】：2017-10-26 14:51:21
【问题描述】：

我正在使用我使用 ajax 请求获得的一些 JSON 数据动态生成“产品”列表视图。当用户点击一个项目时，我想将他们带到另一个页面，该页面将显示所有产品详细信息。

$(document).delegate("#store", "pageinit", function() {
        getProducts('',
        function(data){
            let products = data.products;
            storeProducts(products);
            $(".product-list").html('');
            $.each(products, function(i, item){
              $(".product-list").append(`
                <li>
                  <a href="#product">
                    <img src="${item.picture}" alt="">
                    <h2>${item.prod_name}</h2>
                    <p>${item.prod_desc}</p>
                    <small>Price: <strong>€${item.unit_price}</strong></small>
                  </a>
                </li>
                `).listview("refresh");
            });

          },
          function(e){
            console.log(e);
          },
          function(data){
            console.log('always');
          });
    });

现在的问题是我看不到如何将列表项的数据上下文传递到另一个页面 (#product) 以便用相应的信息填充它。我已经看到了一些类似用例的方法，但它们对我来说似乎有点难看。

我相信这是当今网络/移动应用程序的一个非常基本的功能；然而，JQuery Mobile 似乎并不能让开发人员轻松实现此类功能。我可以使用任何插件/库来实现这个吗？

提前致谢。

【问题讨论】：

标签： jquery-mobile

【解决方案1】：

当您动态创建列表项时，这可以通过添加您自己的自定义数据属性轻松完成，如下所示：

'<li data-id="+${item.prod_id}+">'

然后，您可以通过这种方式获取产品上下文：

$(document).on("vclick", ".product-list li>a", function() {
  var id = $(this).data("id");
  ...get the product context by id
});

这是一个带有工作演示的示例：https://stackoverflow.com/a/43915438/4845566

顺便说一句，除了两个小提示：

如果您使用[].join("") 创建html 令牌，您将避免标记中的额外空格/制表符。

您还可以在产品循环之外只刷新一次listview。

【讨论】：