Ben*_*ter 6 javascript templates mustache
我正在尝试从标签列表中创建一个树,其中包含标签.
这是我正在使用的JSON示例:
{
"tags":
[{"name":"My first tag",
"tags":
[{"name":"My first tag inside a tag"},
{"name":"My second tag inside a tag"}]
}]
}
Run Code Online (Sandbox Code Playgroud)
如果我使用以下胡子模板,它会显示"我的第一个标签",没有任何问题:
<ul>
{{#tags}}
<li tag-id="{{id}}">
{{name}}
</li>
{{/tags}}
</ul>
Run Code Online (Sandbox Code Playgroud)
但是,使用以下模板,我试图在第一个标签内显示标签:
<ul>
{{#tags}}
<li tag-id="{{id}}">
{{name}}
<div>
{{#tags}}
<a>{{name}}</a>
{{/tags}}
</div>
</li>
{{/tags}}
</ul>
Run Code Online (Sandbox Code Playgroud)
使用此模板,Mustache不会呈现任何内容.
如何使用Mustache显示嵌套列表?
小智 7
要解决这个问题,我会这样做:
<div id="result-tag"></div>
<script language="javascript" type="text/javascript">
function test(){
var view = {
"tags":
[{"name":"My first tag",
"tags":
[{"name":"My first tag inside a tag"},
{"name":"My second tag inside a tag"}]
}]
};
var templt = '<ul>{{#tags}}<li>{{name}}<div>{{>subtags}}</div></li>{{/tags}}</ul>';
var partials = {"subtags": "{{#tags}}<a>{{name}}</a><br/>{{/tags}}"};
var html = Mustache.to_html(templt, view, partials);
document.getElementById('result-tag').innerHTML=html;
}
window.onload = test;
</script>
Run Code Online (Sandbox Code Playgroud)
我希望有所帮助