为什么模板没有被渲染?
问题描述:
我想知道为什么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>
答
这是一个可行的样本:http://jsfiddle.net/rniemeyer/ztgfG/
它看起来像在你的代码模板渲染是在一个函数调用renderList()这是不会被调用。此外,如果您将数组传递给模板渲染,它将自动为数组中的每个项目执行此操作,因此您不需要使用{{each}}。
JSFiddle上的示例还显示了如何使用模板绑定为您敲出渲染模板。这样你就不必进行.tmpl调用。
希望这会有所帮助。
即使这似乎不起作用。我的ul保持空:( – Perpetualcoder 2011-02-04 23:16:10