Еще одна приятная особенность 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 заканчивается. Если у вас есть какие-либо вопросы или отзывы, пожалуйста, оставьте комментарий, который, как всегда, высоко ценится.
Всем хорошего дня!!