使用jquery，簡單的內聯模板的句柄

-1

我想在我的頁面中使用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不是？

來源

2015-10-20 user884424

你的語法着色應該給你線索：

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>

來源

2015-10-20 17:40:35 nem035

使用jquery，簡單的內聯模板的句柄

回答

相關問題