爲什麼模板沒有被渲染？

-1

我想知道爲什麼li沒有被追加。爲什麼模板沒有被渲染？

<! DOCTYPE html> 
<html> 
<head> 
    <title>Trying out knockout</title> 
    <script type="text/javascript" src="jquery-1.4.4.js"></script> 
    <script type="text/javascript" src="jquery.tmpl.js"></script> 
    <script type="text/javascript" src="knockout-1.1.2.debug.js"></script>  
    <script type="text/javascript"> 
     var viewModel ={ 
      personName:ko.observable('Stan Marsh'),   
      personAge:ko.observable(28), 
      grades:[ 
        {subject:"Math",grade:'A'}, 
        {subject:"Physics",grade:'B'}, 
        {subject:"Chemistry",grade:'A'}, 
        {subject:"Biology",grade:'A'} 
      ]   
     };  


    $(document).ready(function(){  
     // Apply knockout bindings 
     ko.applyBindings(viewModel); 
     // Apply templates   
     function renderList() { 
      $("#tmplGrades").tmpl(viewModel.grades).append("#ulGradeList"); 
     };  
     // Event Wireup 
     $('#btnViewChanges').click(function(){ 
     var message = "New Name:"+viewModel.personName()+" and New Age:"+ viewModel.personAge(); 
      alert(message); 

     }); 

    }); 

    </script> 
    <script id="tmplGrades" type="text/html"> 
    {{each viewModel.grades}}<li>Subject: ${subject} , Grade: ${grade}</li> 
    </script> 
</head> 
<body> 
    <fieldset> 
     <legend>Person</legend> 
     <p> 
      <label for="tbPersonName">Name:</label> 
      <input type="text" id="tbPersonName" data-bind="value:personName" /> 
     </p> 
     <p> 
      <label for="tbAge">Age:</label> 
      <input type="text" id="tbAge" data-bind="value:personAge" /> 
     </p> 
     <input type="button" id="btnViewChanges" value="View Changes"/> 
    </fieldset> 
    <ul id="ulGradeList"> 

    </ul> 
</body> 
</html>

來源

2011-02-04 Perpetualcoder

這是一個可行的樣本：http://jsfiddle.net/rniemeyer/ztgfG/

它看起來像在你的代碼模板渲染是在一個函數調用renderList（）這是不會被調用。此外，如果您將數組傳遞給模板渲染，它將自動爲數組中的每個項目執行此操作，因此您不需要使用{{each}}。

JSFiddle上的示例還顯示瞭如何使用模板綁定爲您敲出渲染模板。這樣你就不必進行.tmpl調用。

希望這會有所幫助。

來源

2011-02-05 01:57:49

$("#tmplGrades").tmpl(viewModel.grades).append("#ulGradeList");

我想你的意思appendTo不append。

append將內容附加到所選元素，而appendTo將選定的內容附加到選擇器中指定的元素。

來源

2011-02-04 23:02:44 lonesomeday

即使這似乎不起作用。我的ul保持空:( – Perpetualcoder 2011-02-04 23:16:10

爲什麼模板沒有被渲染？

回答

相關問題