使用 jquery，带有简单内联模板的车把

Question

我正尝试在我的页面中使用 Jquery 的车把模板。它是一个带有静态数据的简单页面，脚本标记中的模板。这是我的 html，问题是 Jquery 没有加载包含我的模板的脚本标签，

var source=$('#tasks-template').html();

源未定义，为什么这个未定义？

<html>

<head>
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script type="text/javascript" src="https://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.min.js" />
  <script id="tasks-template" type="text/x-handlebars-template">
    <ul>
      {{#tasks}}
      <li>
        <span>{{name}}</span>  <span>{{count}}</span> 
      </li>
      {{/tasks}}
    </ul>
  </script>

  <script>
    function replaceContent() {
      var tasks = [{
        name: 'A',
        count: 9
      }, {
        name: 'B',
        count: 10
      }]
      console.log(tasks);
      var source = $('#tasks-template').html();
      console.log("template src  " + source)
      var template = Handlebars.compile(source);
      $('#content-placeholder').html(template(tasks));
    }
    replaceContent();
  </script>

</head>


<body>
  <div id="content-placeholder">
    some content
  </div>
</body>

</html>

link

http://plnkr.co/edit/WdHIzaCLAUduUYJWsU2m?p=preview

我正在研究如何从内联脚本加载模板

这里是 html

<html>
<head>
    <script  type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script  type="text/javascript" src="https://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.min.js" />

</head>

<body>
<script id="templateA" type="text/template">
 <ul>
            {{#tasks}}
            <li>                
                    <span>{{name}}</span>  <span>{{count}}</span>  
            </li>
            {{/tasks}}
        </ul>   
</script>

<script id="templateB" type="text/template">
        <ul>
            {{#tasks}}
            <li>                
                    <span>{{name}}</span>  <span>{{count}}</span>  
            </li>
            {{/tasks}}
        </ul>   

</script>
<script>
  alert($('#templateA').html());
  alert($('#templateB').html());
</script>
    <div id="content-placeholder">
        some content
    </div>
</body> 
</html>

link

http://plnkr.co/edit/aCWg3

<html>

<head>
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script type="text/javascript" src="https://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.min.js"></script>

</head>

<body>
  <script id="templateA" type="text/template">
    <ul>
      {{#tasks}}
      <li>
        <span>{{name}}</span>  <span>{{count}}</span> 
      </li>
      {{/tasks}}
    </ul>
  </script>

  <script id="templateB" type="text/template">
    <ul>
      {{#tasks}}
      <li>
        <span>{{name}}</span>  <span>{{count}}</span> 
      </li>
      {{/tasks}}
    </ul>

  </script>
  <script>
    alert($('#templateA').html());
    alert($('#templateB').html());
  </script>
  <div id="content-placeholder">
    some content
  </div>
</body>

</html>

xN3Z5xei8S5EJqu?p=预览

templateA 结果为 undefined 但 templateB 打印出来，为什么 templateA 是 undefined 而 templateB 不是？

Answer 1

你语法的颜色应该给你线索：

script 标签需要用 </script> 结束，不能使用 <script />:

<script  type="text/javascript" src="https://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.min.js" />
...
            {{/tasks}}
        </ul>   
</script>     <-- This closes the above script that loads handlebars -->

变化：

<script  type="text/javascript" src="https://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.min.js" />

至（添加结束标记）：

<script  type="text/javascript" src="https://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.min.js"></script>

使用 jquery，带有简单内联模板的车把

using jquery, handlebars with simple inline template

javascript

jquery

handlebars.js