6

我有这个非常简单的结构，它不能用 mustache 解析并总是返回：

未闭合部分：已选择

<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}} 从选项标签中移出，它就会开始正常工作。

mustache 是否支持这些嵌套在 html 元素中的 #{{ 标签？

4

1 回答 1

7

小胡子应该像这样工作，你做对了。

它是一个简单的文本解析器，因此不关心 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>

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

编辑

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

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

  • 将模板放在 Javascript 变量中，而不是页面的 HTML 源代码中
  • 使用jQuery.get()从服务器加载模板
  • 转义模板中的<and>并将其放在 hiddentextarea中，然后使用 jQuery 的.val()方法获取模板并在渲染之前取消 and 的<转义>

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

于 2012-12-10T10:53:46.997 回答