Question

我正在使用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似乎并没有让开发人员轻松实现这样的功能。我可以使用任何插件/库来实现它吗？

提前致谢。

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

以下是工作演示的示例：https://stackoverflow.com/a/43915438/4845566

顺便说一下，只有两个小提示放在：

如果使用html创建[].join("")令牌，则会避免使用标记中的额外空格/标签。

您也可以在产品循环中刷新listview一次。

JQuery Mobile - 如何将数据上下文从listview项传递到另一个页面？

1 个答案: