javascript - 内容相关的模板/带有 moustache.js 的部分

Question

我想使用 moustache.js呈现以下 JSON 结构:

[
  {type:'img', src:'some_url'},
  {type:'text', text:'lorem ipsum ...'},
  {type:'link', href:'some_url', label:'click here'},
  //  more entries ...
]

我想根据类型呈现每个项目:img 应该呈现为 <img src="{{src}}"> , 文本为 <p>{{text}}</p>等。moustache.js 有可能吗？还是我应该推出自己的模板系统？如果可能的话，模板会是什么样子，我必须如何扩展它作为 mustache View 工作的 JSON 结构？

Answer 1

是的，这绝对有可能。

你可以这样做

{{#myarray}} {{! loop through array}}
{{#src}} {{! if you have src it must be an img}}
  <img src="{{src}}">
{{/src}}  
{{#text}} {{! if you have text is must be a paragraph}}
  <p>{{text}}{{/p}}
{{/text}}
{{#href}}} {{! if you have an href is must be an anchor}}
  <a href="{{href}}">{{label}}</a>
{{/href}}
{{/myarray}}

根本没有理由扩展 json，只要字段对于特定类型的输出是唯一的。您可以只检查该字段是否存在，如果存在，则必须以某种方式输出。

除了使用“类型”字段之外，您还可以做的另一件事是使用各种标志设置 json 以作为模板的基础(例如“is_image: true”、“is_anchor: true”等)。