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>

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

将数据从一个渲染模板复制到新模式中

1 个答案: