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 demo site中输入了以下内容，它按预期工作：

胡子模板

<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>

如果你可以链接到显示错误的Fiddle，那么它将有助于弄清楚发生了什么，但这应该有效。

修改

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

尝试使用其他技术将Mustache模板加载到Javascript代码中，例如......

将模板放在Javascript变量中，而不是放在页面的HTML源代码中

使用jQuery.get()
从服务器加载模板
退出模板中的<和>并将其放入隐藏的textarea中，然后使用jQuery的.val()方法获取模板并取消{{在呈现它之前{1}}和<

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

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

1 个答案: