Copy data from one rendered template into a new modal

Question

So I have products being rendered by using one template. In the template, I have a button where the user can then click a button to get more information about the product in a modal.

How can I copy the name from the displayed product in the template to a new modal template?

<div id="result"></div>

Template with Displayed Products

{{for data}}
<div class="product">
  <h1>{:prod.productName}</h1>
  <div class="short-desc">
    {:prod.shortDesc}
    {:prod.price}
    <button class="modal prod-btn">Find out more</button>
  </div>
</div>
{{/for}}

Modal Template where I want to copy same data name from current displayed template

<div id="product-modal">
  <div class="">{:prod.productName}</div>
  <div class="">
    {:prod.longDesc}
    {:prod.price}
  </div>
</div>

BorisMoore BorisMoore · Accepted Answer · 2018-04-26T22:42:22

There are quite a few alternate ways of doing that. You can do it entirely with data-driven UI - by having some data property corresponding to the data object (item) or index of the data array that you want to show details of.

See all of these examples which show selecting an object in an array and providing details:

http://www.jsviews.com/#samples/editable.

Here is a another example:

<script id="myTmpl" type="text/x-jsrender">
  {^{for list}}
    <div data-link="{on ~show #index}">{{:first}}</div>
  {{/for}}
</script>

<script id="detailTmpl" type="text/x-jsrender">
  {^{for list[detail]}}
    <div class="popup">
      {{:first}}
      {{:last}}
      {^{on ~hide}}Hide{{/on}}
    </div>
  {{/for}}
</script>

<div id="page"></div>

<div id="detail"></div>

with this code:

var myTmpl = $.templates("#myTmpl"),
  detailTmpl = $.templates("#detailTmpl"),
  data = {
    list : [
      {first: "Jo",last: "Blow"},
      {first: "Bob",last: "Dale"}],
      detail: -1
  },
  helpers = {
    show: function(index) {
      $.observable(data).setProperty("detail", index)
    },
    hide: function() {
      $.observable(data).setProperty("detail", -1)
    }
  };

myTmpl.link("#page", data, helpers);
detailTmpl.link("#detail", data, helpers);

Copy data from one rendered template into a new modal

1 Answers