使用jquery，简单的内联模板的句柄

问题描述：

我想在我的页面中使用Jquery的句柄模板。它是一个带有静态数据的简单页面，脚本标签中的模板。这里是我的HTML，问题是jquery不加载我的脚本标签，其中包含我的模板，使用jquery，简单的内联模板的句柄

var source = $（'＃tasks-template'）。html（）;

source is undefined，why not this undefined？

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

链接

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>

链接

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结果未定义，但templateB打印输出，为什么templateA未定义，templateB不是？

答

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

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，简单的内联模板的句柄

相关推荐