显示选定的元素树枝模板

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(