Скопируйте данные из одного предоставленного шаблона в новый модальный - PullRequest
Новая
       7

Скопируйте данные из одного предоставленного шаблона в новый модальный

0 голосов
/ 26 апреля 2018

Итак, у меня есть продукты, отображаемые с использованием одного шаблона.В шаблоне у меня есть кнопка, где пользователь может затем нажать кнопку, чтобы получить больше информации о продукте в модальном режиме.

Как скопировать имя из отображаемого продукта в шаблоне в новый модальный шаблон? 

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

1 Ответ

0 голосов
/ 27 апреля 2018

Есть несколько альтернативных способов сделать это.Вы можете сделать это полностью с управляемым данными пользовательским интерфейсом - имея какое-либо свойство данных, соответствующее объекту данных (элементу) или индексу массива данных, для которого вы хотите показать подробности.

См. Все эти примеры, которыепоказать выбор объекта в массиве и предоставление сведений:

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