knockoutjs模板無法正常工作

Question

我當時正在關注一個關於淘汰賽的視頻，我不知道爲什麼我的代碼無法正常工作。

我使用這些JS腳本：

<script src="assets/js/knockout-2.0.0.js" type="text/javascript"></script> 
    <script src="assets/js/jquery-1.7.1.min.js" type="text/javascript"></script> 
    <script src="assets/js/jquery.tmpl.min.js" type="text/javascript"></script>  

<h2>Friends</h2> 
    <ul data-bind="template: {name: 'friendsTemplate', foreach:friends}"></ul> 

    <script type="text/html" id="friendsTemplate"> 
     <li>${ data.name }</li> 
    </script> 

<script type="text/javascript"> 

    function friend(name) { 
     return { name : ko.observable(name) }; 
    } 

    var viewModel = { 
     friends : ko.observableArray([new friend('João'), new friend('Lucas')]) 
    }; 
    ko.applyBindings(viewModel); 
</script> 

此代碼返回我這個，它顯示的朋友正確的金額，但不顯示姓名。

Friends 
${ data.name } 
${ data.name } 

我在做什麼錯？

在此先感謝。

編輯 製作一些測試，此代碼的工作，因爲它不使用模板，所以我的代碼是正確的，問題是隻與模板。

<script type="text/html" id="friendsTemplate"> 
    <li><span data-bind="text: name"></span></li> 
</script> 

Answer 1

你應該參考jquery.tmpl到knockoutjs

<script src="assets/js/jquery-1.7.1.min.js" type="text/javascript"></script> 
<script src="assets/js/jquery.tmpl.min.js" type="text/javascript"></script> 
<script src="assets/js/knockout-2.0.0.js" type="text/javascript"></script> 

，並更改$ {之前data.name}到$ {name}

http://jsfiddle.net/c8Svk/

Answer 2

嘗試：

<script type="text/html" id="friendsTemplate"> 
    <li>$data.name</li> 
</script> 

或者，你可以只是做：

<script type="text/html" id="friendsTemplate"> 
    <li data-bind="text: name"></li> 
</script>