小胡子嵌套结构未封闭的部分bug

Question

我有这个非常简单的结构,无法用胡子解析并始终返回:

未封闭的部分:已选中

<ul id="source">
{{#recomms}}                                                                                                                                                                                                 
  <li>
    <select>
      {{#sizes}}
        <option {{#selected}}selected="selected"{{/selected}} >{{label}}</option>
      {{/sizes}}
    </select>
  </li>
{{/recomms}}
</ul>

渲染javascript:

$("#placement").html(Mustache.render($('#source').html(), data));

如果我将#{{selected}}移出选项标签,它就会开始正常工作.

小胡子是否支持这些嵌套的#{{放置在html元素中的标签？

Answer 1

小胡子应该像这样工作,你正确地做到了.

它是一个简单的文本解析器,所以不关心HTML结构/标签/等.

您使用哪种环境/解析器版本的Mustache？因为这似乎适用于官方演示.

我在Mustache演示站点中输入以下内容,它按预期工作:

小胡子模板

<ul id="source">
{{#recomms}}                                                                                                                                                                                                 
  <li class="">
    <select name="size" class="recommendation-size">
      {{#sizes}}
        <option value="{{val}}" {{#selected}}selected="selected"{{/selected}} >{{label}}</option>
      {{/sizes}}
    </select>
  </li>
{{/recomms}}
</ul>

示例JSON

{"recomms": [
    {"sizes": [
        { "val": "value", "label": "label", "selected": false },
        { "val": "value2", "label": "label2", "selected": true }
    ]}
]}

产量

<ul id="source">
<li class="">
<select name="size" class="recommendation-size">
<option value="value" >label</option>
<option value="value2" selected="selected">label2</option>
</select>
</li>
</ul>

如果你可以链接到表现出错误的小提琴,那将有助于弄清楚发生了什么,但这应该有效.

编辑

我可能已经发现了这个问题.您正在使用jQuery从现有HTML元素加载HTML,这意味着浏览器已经尝试呈现HTML并丢弃无效位,包括{{/selected}}位.

尝试使用不同的技术将Mustache模板加载到您的Javascript代码中,例如...

• 将模板放在Javascript变量中,而不是放在页面的HTML源代码中
• 使用jQuery.get()从服务器加载模板
• 逃离<和>"模板S和把它放在一个隐藏textarea,然后使用jQuery的.val()方法来获得模板和反转义的<和>"你使它S前

正如您在评论中指出的那样,第一个选项效果很好!