пример примера для нокаута не работает

В следующем коде почему шаблон jquery не отображается? Я думал, что шаблон был построен? спасибопример примера для нокаута не работает

<script id="friendsTemplate" type="text/html"> 

    <ul> 

     {{each(index,friend) friends}} 

     <li>${ friend.name }</li> 

     {{/each}} 
    </ul> 

</script>

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <script src="Scripts/knockout-2.2.1.js"></script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 

     <h1>details</h1> 

     <p>first name: <input data-bind="value: firstName" /></p> 
     <p>last name: <input data-bind="value: lastName" /></p> 

     <p>full name: <span data-bind ="text: fullName"></span></p> 

     <h2>friends</h2> 
     <div data-bind="template: 'friendsTemplate'"></div> 


     <script id="friendsTemplate" type="text/html"> 

      <ul> 

       {{each(index,friend) friends}} 

       <li>${ friend.name }</li> 

       {{/each}} 
      </ul> 

     </script> 


    </div> 
    </form> 
</body> 
</html> 


<script type ="text/javascript"> 

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

    var viewModel ={ 
     firstName: ko.observable("bert"), 
     lastName: ko.observable("smith"), 
     friends:ko.observableArray([new friend('steve'),new friend('annie')]) 
    }; 

    viewModel.fullName = ko.dependentObservable(function() { 
     return this.firstName() + " " + this.lastName(); 
    },viewModel); 

    ko.applyBindings(viewModel); 
</script>

источник

2013-04-19 Hello-World

Поддержка jQuery.tmpl встроена однако вы должны ссылаться на JQuery и jQuery.tmpl, чтобы заставить его работать, как указано в документации в соответствии с: Note 6: Using jQuery.tmpl, an external string-based template engine:

По умолчанию, Knockout поставляется с поддержкой jquery.tmpl. Чтобы использовать его, вам необходимо ссылаться на следующие библиотеки, в следующем порядке:

<!-- First jQuery -->  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
<!-- Then jQuery.tmpl --> <script src="jquery.tmpl.js"></script> 
<!-- Then Knockout --> <script src="knockout-x.y.z.js"></script>

Если вы ссылаетесь все зависимости ваш код должен работать нормально: Demo JSFiddle

источник

2013-04-19 08:12:37 nemesv

благодаря ................ –

@nemesv Вашего jsfiddle примера не работает – lbrahim

@ Md.lbrahim благодарственной информации. Ссылка 'jquery.tmpl.js' была сломана в скрипке, я исправил ее сейчас. – nemesv

Вам нужно пройти объект данных в ваш шаблон.

data-bind="template: { name: 'friendsTemplate', data: $data }"

Подробнее об http://knockoutjs.com/documentation/template-binding.html.

Есть ли причина, по которой вы используете шаблон jQuery? Следующее в большей степени соответствует «типичному» использованию нокаутов. Также вы должны использовать только внешние шаблоны при повторном использовании. Этот код может быть легко встроен.

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

источник

2013-04-19 08:13:24 RullDawg

Спасибо. Я использую шаблон, как он использовался в примере, и он предназначен для обучения. –

пример примера для нокаута не работает

ответ

Смежные вопросы