шаблон knockoutjs не работает - PullRequest
Новая
       16

шаблон knockoutjs не работает

1 голос
/ 14 февраля 2012

Я смотрел видео о нокауте и понятия не имею, почему мой код не работает.

Я использую эти 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>

Ответы [ 2 ]

3 голосов
/ 14 февраля 2012

вы должны ссылаться на 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/

0 голосов
/ 14 февраля 2012

Попробуйте: 

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

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

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