javascript - 将数据从一个渲染的模板复制到一个新的模态中

Question

因此，我使用一个模板呈现产品。在模板中，我有一个按钮，用户可以在其中单击一个按钮以获取有关模式中产品的更多信息。

如何将模板中显示产品的名称复制到新的模态模板？

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

带有显示产品的模板

{{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}}

我想从当前显示的模板复制相同数据名称的模态模板

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

标签： javascriptjsrenderjsviews

Answer 1

有很多替代方法可以做到这一点。您可以使用数据驱动的 UI 完全做到这一点 - 通过具有与您想要显示其详细信息的数据对象（项）或数据数组的索引相对应的一些数据属性。

查看所有这些示例，这些示例显示在数组中选择对象并提供详细信息：

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

这是另一个例子：

<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>

使用此代码：

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