icanhaz/mustache 循环（遍历元素）js 错误答案

【问题标题】：icanhaz/mustache loop (iterate through elements) js erroricanhaz/mustache 循环（遍历元素）js 错误
【发布时间】：2013-03-17 00:58:12
【问题描述】：

我正在尝试使 icanhaz/mustache 循环正常工作，正如 answer 中所定义的那样，我在浏览器控制台中遇到以下错误：

Uncaught Error: Syntax error, unrecognized expression: <option value="1">First</option>
                        <option value="2">Second</option>

不知道为什么。我刚刚设法发现这是导致问题的行：

ich.myTemplate(listOfStuff);

这是我的全部代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/transitional.dtd">
<html>
    <head>
        <title>icanhaz.js demo</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
        <script type="text/javascript" src="https://raw.github.com/HenrikJoreteg/ICanHaz.js/master/ICanHaz.js"></script>
    </head>
    <body>

    <select id="mySelectBox">
    </select>

    <script id="myTemplate" type="text/html">
        {{#stuff}}
        <option value="{{key}}">{{desc}}</option>
        {{/stuff}}
    </script>

    <script>
        $(document).ready( function() {

            var listOfStuff = {stuff: [ 
                    {key: "1", desc: "First"},
                    {key: "2", desc: "Second"}
                ]};
            var x = ich.myTemplate(listOfStuff);
            $("#mySelectBox").append(x);
        });
    </script>

</body>
</html>

感谢您的任何建议！

【问题讨论】：

标签： javascript jquery templates mustache icanhaz.js

【解决方案1】：

最后我发现了错误。这是 jquery 版本问题 - 1.9.1 返回错误而 1.8.3 没有。比较这些演示：

http://tinyurl.com/cb48wb9 - jquery 1.9.1
http://tinyurl.com/bnf4xld - jquery 1.8.3

对于 1.9.1 版本，请查看 javascript 控制台。

而且，如果我改变了

<script id="myTemplate" type="text/html">
    {{#stuff}}
    <option value="{{key}}">{{desc}}</option>
    {{/stuff}}
</script>

到

<script id="myTemplate" type="text/html">
    {{#stuff}}<option value="{{key}}">{{desc}}</option>{{/stuff}}
</script>

对于 1.9.1，它也可以正常工作。

编辑：这是一个打开的issue on icanhaz/github。如果您愿意，请帮助修复此错误！

【讨论】：

【解决方案2】：

var listOfStuff = {stuff: [ 
                  {key: "1", desc: "First"},
                  {key: "2", desc: "Second"}
              ]};
var html = ich.myTemplate(listOfStuff);
$("#mySelectBox").append($(html));

试试看？

【讨论】：

我已经提供了我正在执行的所有代码。它与上述示例 100% 相同，并返回上述错误。我不知道为什么。
那么如果你在追加之前使用美元语法来包装你的 html 会发生什么？
请看下面我的回答。查看这些链接并在浏览器中运行它们。你能告诉我上面的代码你使用的是哪个 jquery 版本吗？