knockoutjs template not working

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 } 

Что я делаю неправильно?

Заранее спасибо.

EDIT Выполнение некоторых тестов и этот код работает, потому что он не использует шаблон, так что мой код является правильным, проблема только с шаблоном.

<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

Try:

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

В качестве альтернативы, вы можете просто сделать:

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