JQuery Mobile - リストビューアイテムから別のページにデータコンテキストを渡すにはどうすればいいですか？

Question

私はajaxリクエストを使用して取得しているいくつかのJSONデータを使って、 "products"のリストビューを動的に生成しています。ユーザーがアイテムをクリックすると、その商品の詳細がすべて表示される別のページに移動したいと考えています。

$(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 /モバイルアプリケーションにとって非常に基本的な機能だと思います。しかし、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

、ちょうど2つの小さなヒント脇：

[].join("")を使用してhtmlトークンを作成した場合、余分なスペースやタブはマークアップではなくなります。

listviewを製品ループから1回だけリフレッシュすることもできます。