Статьи

Шаблонный с Knockout.js

Июль 17, 2018

Еще одна приятная особенность Knockout.js — возможность иметь шаблоны для отображения ваших данных. Например, предположим, что у вас есть коллекция данных, и вы хотите, чтобы они отображались в определенном формате без необходимости большого количества манипуляций с DOM. Это может быть достигнуто двумя способами, когда дело доходит до Knockout.js «

  • Использование шаблонов на основе jQuery
  • Использование родных шаблонов нокаута

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

Итак, сначала давайте посмотрим на пример ниже:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <title>Superhero Registration</title>
</head>

<body>

 <div data-bind="template:'superHeroTemplate'">
  
  
 </div>


<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="jquery-tmpl.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>

 <script type="text/javascript">
 
 $(function(){
   
   var data = [
    new superHero('Superman'),
    new superHero('Spiderman')
   ];
   
   var viewModel = {
    superHeroes:ko.observableArray(data)
   };
   
   function superHero(name){
    return {
     name:ko.observable(name)
    };
   }
   
   ko.applyBindings(viewModel);
  }
  );
 </script>
<script id="superHeroTemplate" type="text/html">
 <ul>
  {{each superHeroes}} 
   <li>${name}</li>
  {{/each}}
  
 </ul>
</script>
</body>
</html>

Хорошо, я одержим супергероями, поэтому мои примеры следуют той же схеме. Здесь я создаю наблюдаемый массив супергероев.

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

Вышеприведенная функция оборачивает переданный входной параметр в наблюдаемый объект и передает его обратно. Это не обязательно, но я сделал это так, чтобы Knockout управлял не только наблюдаемым массивом, но также и элементами в массиве, поскольку теперь они сами являются наблюдаемыми объектами.

Здесь я использую шаблонизацию jQuery, и поэтому вам нужен еще один файл сценария, который вы загружаете
отсюда . Затем вам нужно включить его в свой путь, чтобы этот пример работал. Я сохранил этот файл скрипта как
jquery-tmpl.js . Обратите внимание, что порядок включения этих скриптов также важен. Сначала это должен быть скрипт jQuery, затем скрипт шаблона jQuery и, наконец, скрипт KnockoutJS.

Сначала в корневом элементе нам нужно определить шаблон, который мы будем использовать. Это делается следующим образом:

<div data-bind="template:'superHeroTemplate'">

Здесь вы можете видеть в атрибуте привязки данных я определил
шаблон как
superHeroTemplate. Это имя — имя, которое я использовал в качестве атрибута id в шаблоне скрипта ниже:

<script id="superHeroTemplate" type="text/html">
 <ul>
  {{each superHeroes}} 
   <li>${name}</li>
  {{/each}}
  
 </ul>
</script>

Обратите внимание, что я указал тип как text / html здесь, так как я не хочу, чтобы браузер интерпретировал этот тег сценария, так как мы используем его с единственной целью создания шаблонов. В
супергероев  приписывать я определил в
каждой метке это имя в моем ViewModel, который показан ниже. Также
атрибут $ {name} — это то, что я возвращаю из
 функции superHero, которая возвращает видимые объекты при передаче имени супергероя.

 var viewModel = {
    superHeroes:ko.observableArray(data)
   };

Это все, что требуется для того, чтобы это работало. Одна вещь, которую вы, возможно, заметили, это то, что это слишком навязчиво с точки зрения использования дополнительных DOM и тегов скрипта для этой работы. Это выглядит скорее как хак, поскольку мы указываем теги скрипта с вызовами типа через text / html, что недопустимо только для работы шаблонов. Это где родной шаблон Knockout пригодится. Давайте посмотрим, как вы можете сделать то же самое с помощью этого, и вы поймете, почему это намного чище.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <title>Superhero Registration</title>
</head>

<body>

 <div>
  <ul>
   <!-- ko foreach:superHeroes -->
    <li data-bind="text: $data.name"></li>
   <!--/ko-->
  </ul>
  
 </div>


<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="jquery-tmpl.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>

 <script type="text/javascript">
 
 $(function(){
   
   var data = [
    new superHero('Superman'),
    new superHero('Spiderman')
   ];
   
   var viewModel = {
    superHeroes:ko.observableArray(data)
   };
   
   function superHero(name){
    return {
     name:ko.observable(name)
    };
   }
   
   ko.applyBindings(viewModel);
  }
  );
 </script>

</body>
</html>

Как видите, теги скрипта не использовались. Вы работаете непосредственно с DOM, и вам нужно только добавить блок комментариев HTML и написать свой код в нем. Вы даже можете избавиться от написания этого в комментариях и непосредственно встроить цикл «для каждого» в элемент DOM следующим образом;

<div>
  <ul data-bind="foreach:superHeroes">
   <li data-bind="text:$data.name"></li>
  </ul>
  
 </div>

Много чище, не правда ли? Нет больше хаков, только прямое манипулирование DOM. Это сила, которую дает вам эта библиотека. Вы можете написать это в соответствии с тем, что вы предпочитаете.

На этом моя статья об использовании шаблонов в KnockoutJS заканчивается. Если у вас есть какие-либо вопросы или отзывы, пожалуйста, оставьте комментарий, который, как всегда, высоко ценится.

Всем хорошего дня!!

32
Share: