Показать шаблон выбранных элементов

Question

data= [{id:1, text:'abc'},{id:2, text:'cde'}]

В моем шаблоне я хочу сделать это:

<ul>
  {{% for article in data %}}
  <li><a href={{article.id}}>{{article.id}}</a></li>
</ul>

При нажатии на li я бы отображал только свойство "текст" соответствующего идентификатора.

<div>{{selected article.text}}</div>

Если щелкнуть 1, я хочу увидеть «ab c».

Есть ли способ сделать это с веткой?

Answer 1

Если я правильно понимаю, вы не можете динамически отображать текст, связанный с идентификатором, при щелчке на li, содержащем связанный идентификатор.

Этого нельзя достичь только с помощью веточки. Вам нужно немного javascript здесь. Основное, что вы можете сделать, это следующее:

<ul>
  {% for article in data %}
    <li>
      <a href="#" data-content="{{ article.text|e('html_attr') }}" onclick="document.getElementById('dynamic-content').innerHTML = this.dataset.content; return false">
        {{ article.id }}
      </a>
    </li>
  {% endfor %}
</ul>
<div id="dynamic-content"></div>

• |e('html') - это экранирование для хранения его внутри атрибута html, , узнайте больше здесь
• onclick="" это содержит чистый javascript, он работает так, но я рекомендую сделать это по-другому (оформить заказ this JSFiddle )