0

我正在尝试了解模板的基础知识并遇到以下问题。当我尝试将ID或/和type属性附加到<script>我的 HTML 代码中的标记时，它不起作用：

<!DOCTYPE html>
<html>

           <head>
                 <link rel="stylesheet" type="text/css" href="style.css">
             <script src="somescript.js"></script>

           </head>
           <body>

    <script type="text/html" id="template1">
                <form name="formXY">
                    <p>
                        <label>Field1
                            <input type="text" name="form_field1" value= "{{field1}}">
                        </label>
                        <button type="button">Submit</button>
                    </p>
                </form>
            </script>
</body>
</html>

我在 chrome/firefox/IE9/Opera 中运行了它，但它们都没有解析标签之间的<script>代码。浏览器认为它只是一个文本字段。当我删除ID和type属性时，它再次被正确解析。

我可能错过了一些非常基本的东西......

4

2 回答 2

2

您需要type在脚本标记中添加一个非 javascript，因为关键是您不希望浏览器解析它（作为 javascript），并且通过使用自定义type浏览器将忽略它（直到您使用 javascript 抓取它是）

<!DOCTYPE html>
<html>

<head>
   <link rel="stylesheet" type="text/css" href="style.css">
   <script src="somescript.js"></script>

</head>
<body>

    <script type="text/x-handlebars-template" id="template1">
        <form name="formXY">
        <p>
            <label>Field1
            <input type="text" name="form_field1" value= "{{field1}}">
            </label>
            <button type="button">Submit</button>
        </p>
        </form>
    </script>
</body>
</html>

然后在您的 javascript 中somescript.js，您需要使用类似这样的方式获取该脚本标记的内容

var uncompiledTemplate = document.getElementById('template1').innerHtml;

// then pass this template to your templating engine...
// if your using handlebars:
var template = Handlebars.compile(uncompiledTemplate);

然后你就可以使用你的模板了！

于 2013-01-12T23:18:17.813 回答
0

标签的内容<script>永远不会被解析为 DOM 元素，内容只是作为文本出现在 DOM 中（尽管默认<script>情况display:none;下它不会出现在页面上）。如果type提供的 a 必须是浏览器在尝试执行它之前识别的。请注意，旧版浏览器使用该language属性。

于 2013-01-12T23:41:57.453 回答