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

Question

我正在生成 "products" 的列表视图，其中包含我使用 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) 以便用相应的信息填充它。我已经看到了一些类似用例的方法，但它们对我来说有点难看。

我认为这是当今 web/mobile 应用程序的一个非常基本的功能；然而 JQuery 移动端似乎并不能让开发人员轻松实现此类功能。我可以使用任何 plugin/library 来实现这个吗？

提前致谢。

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

这是一个工作演示示例：

顺便说一句，只有两个小提示 放在一边 :

如果您使用 [].join("") 创建 html 标记，您将避免标记中的额外 spaces/tabs。

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

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

JQuery Mobile - How can I pass data context from a listview item to another page?

jquery-mobile