显示选定元素树枝模板

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 时，我将仅显示相关 id 的属性“文本”。

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

如果点击 1 我想看到“abc”。

有没有办法用树枝做到这一点？

Answer 1

如果我理解正确，您无法在单击包含相关 id 的 li 时动态显示与 id 相关的文本。

这不能仅用树枝来实现。 你需要一些 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，它像这样工作，但我建议用另一种方式来做（检查这个 JSFiddle ）