Шаблон — это набор элементов DOM, которые можно использовать повторно. Шаблонирование позволяет легко создавать сложные приложения благодаря свойству минимизации дублирования элементов DOM.
Есть 2 способа создания шаблонов.
-
Собственные шаблоны — этот метод поддерживает привязки потока управления, такие как foreach, with и if. Эти привязки фиксируют HTML-разметку, существующую в элементе, и используют ее в качестве шаблона для случайных элементов. Никакая внешняя библиотека не требуется для этого шаблона.
-
Шаблонирование на основе строк — KO подключается к стороннему движку для передачи значений ViewModel в него и вставляет полученную разметку в документ. Например, JQuery.tmpl и Underscore Engine.
Собственные шаблоны — этот метод поддерживает привязки потока управления, такие как foreach, with и if. Эти привязки фиксируют HTML-разметку, существующую в элементе, и используют ее в качестве шаблона для случайных элементов. Никакая внешняя библиотека не требуется для этого шаблона.
Шаблонирование на основе строк — KO подключается к стороннему движку для передачи значений ViewModel в него и вставляет полученную разметку в документ. Например, JQuery.tmpl и Underscore Engine.
Синтаксис
template: <parameter-value> <script type = "text/html" id = "template-name"> ... ... // DOM elemets to be processed ... </script>
Обратите внимание, что тип предоставляется в виде text / html в блоке сценария, чтобы уведомить KO о том, что это не исполняемый блок, а просто блок шаблона, который необходимо отобразить.
параметры
Комбинация следующих свойств может быть отправлена в качестве значения параметра в шаблон.
-
name — представляет имя шаблона.
-
узлы — это представляет массив узлов DOM, которые будут использоваться в качестве шаблона. Этот параметр игнорируется, если передан параметр name.
-
Данные — это не что иное, как данные, которые будут показаны через шаблон.
-
if — Шаблон будет обслуживаться, если данное условие приводит к значению true или true-like.
-
foreach — Служить шаблону в формате foreach.
-
as — это просто для создания псевдонима в элементе foreach.
-
afterAdd, afterRender, beforeRemove — Это все для представления вызываемых функций, которые должны быть выполнены в зависимости от выполняемой операции.
name — представляет имя шаблона.
узлы — это представляет массив узлов DOM, которые будут использоваться в качестве шаблона. Этот параметр игнорируется, если передан параметр name.
Данные — это не что иное, как данные, которые будут показаны через шаблон.
if — Шаблон будет обслуживаться, если данное условие приводит к значению true или true-like.
foreach — Служить шаблону в формате foreach.
as — это просто для создания псевдонима в элементе foreach.
afterAdd, afterRender, beforeRemove — Это все для представления вызываемых функций, которые должны быть выполнены в зависимости от выполняемой операции.
наблюдения
Визуализация именованного шаблона
Шаблоны неявно определяются HTML-разметкой внутри DOM при использовании с привязками потока управления. Однако, если вы хотите, вы можете выделить шаблоны в отдельный элемент, а затем ссылаться на них по имени.
пример
<!DOCTYPE html> <head> <title>KnockoutJS Templating - Named Template</title> <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js" type = "text/javascript"></script> </head> <body> <h2>Friends List</h2> Here are the Friends from your contact page: <div data-bind = "template: { name: 'friend-template', data: friend1 }"></div> <div data-bind = "template: { name: 'friend-template', data: friend2 }"></div> <script type = "text/html" id = "friend-template"> <h3 data-bind = "text: name"></h3> <p>Contact Number: <span data-bind = "text: contactNumber"></span></p> <p>Email-id: <span data-bind = "text: email"></span></p> </script> <script type = "text/javascript"> function MyViewModel() { this.friend1 = { name: 'Smith', contactNumber: 4556750345, email: 'smith123@gmail.com' }; this.friend2 = { name: 'Jack', contactNumber: 6789358001, email: 'jack123@yahoo.com' }; } var vm = new MyViewModel(); ko.applyBindings(vm); </script> </body> </html>
Выход
Давайте выполним следующие шаги, чтобы увидеть, как работает приведенный выше код —
-
Сохраните приведенный выше код в файле template-named.htm .
-
Откройте этот файл HTML в браузере.
-
Здесь Friend-template используется 2 раза.
Сохраните приведенный выше код в файле template-named.htm .
Откройте этот файл HTML в браузере.
Здесь Friend-template используется 2 раза.
Использование «foreach» в шаблоне
Ниже приведен пример использования параметра foreach вместе с именем шаблона.
пример
<!DOCTYPE html>
<head>
<title>KnockoutJS Templating - foreach used with Template</title>
<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
type = "text/javascript"></script>
</head>
<body>
<h2>Friends List</h2>
Here are the Friends from your contact page:
<div data-bind = "template: { name: 'friend-template', foreach: friends }"></div>
<script type = "text/html" id = "friend-template">
<h3 data-bind = "text: name"></h3>
<p>Contact Number: <span data-bind = "text: contactNumber"></span></p>
<p>Email-id: <span data-bind = "text: email"></span></p>
</script>
<script type = "text/javascript">
function MyViewModel() {
this.friends = [
{ name: 'Smith', contactNumber: 4556750345, email: 'smith123@gmail.com' },
{ name: 'Jack', contactNumber: 6789358001, email: 'jack123@yahoo.com' },
{ name: 'Lisa', contactNumber: 4567893131, email: 'lisa343@yahoo.com' }
]
}
var vm = new MyViewModel();
ko.applyBindings(vm);
</script>
</body>
</html>
Выход
Давайте выполним следующие шаги, чтобы увидеть, как работает приведенный выше код —
-
Сохраните приведенный выше код в файле template-foreach.htm .
-
Откройте этот файл HTML в браузере.
-
Здесь в привязке шаблона используется foreach control.
Сохраните приведенный выше код в файле template-foreach.htm .
Откройте этот файл HTML в браузере.
Здесь в привязке шаблона используется foreach control.
Создание псевдонима Использование в качестве ключевого слова для элементов foreach
Ниже описано, как можно создать псевдоним для элемента foreach.
<div data-bind = "template: {
name: 'friend-template',
foreach: friends,
as: 'frnz'
}"></div>
С помощью псевдонима становится легко обращаться к родительским объектам из циклов foreach. Эта функция полезна, когда код сложен и вложен на нескольких уровнях.
пример
<!DOCTYPE html>
<head>
<title>KnockoutJS Templating - using alias in Template</title>
<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
type = "text/javascript"></script>
</head>
<body>
<h2>Friends List</h2>
Here are the Friends from your contact page:
<ul data-bind = "template: {
name: 'friend-template',
foreach: friends,
as: 'frnz'
}"></ul>
<script type = "text/html" id = "friend-template">
<li>
<h3 data-bind = "text: name"></h3>
<span>Contact Numbers</span>
<ul data-bind = "template: {
name : 'contacts-template',
foreach:contactNumber,
as: 'cont'
} "></ul>
<p>Email-id: <span data-bind = "text: email"></span></p>
</li>
</script>
<script type = "text/html" id = "contacts-template">
<li>
<p><span data-bind = "text: cont"></span></p>
</li>
</script>
<script type = "text/javascript">
function MyViewModel() {
this.friends = ko.observableArray ( [
{
name: 'Smith',
contactNumber: [ 4556750345, 4356787934 ],
email: 'smith123@gmail.com'
},
{
name: 'Jack',
contactNumber: [ 6789358001, 3456895445 ],
email: 'jack123@yahoo.com'
},
{
name: 'Lisa',
contactNumber: [ 4567893131, 9876456783, 1349873445 ],
email: 'lisa343@yahoo.com'
}
]);
}
var vm = new MyViewModel();
ko.applyBindings(vm);
</script>
</body>
</html>
Выход
Давайте выполним следующие шаги, чтобы увидеть, как работает приведенный выше код —
-
Сохраните приведенный выше код в файле template-as-alias.htm .
-
Откройте этот файл HTML в браузере.
-
Псевдоним используется вместо полного имени массивов.
Сохраните приведенный выше код в файле template-as-alias.htm .
Откройте этот файл HTML в браузере.
Псевдоним используется вместо полного имени массивов.
Использование afterAdd, beforeRemove и afterRender
Существуют ситуации, когда дополнительная пользовательская логика должна быть запущена для элементов DOM, созданных шаблоном. В таком случае могут использоваться следующие обратные вызовы. Учтите, что вы используете элемент foreach тогда —
afterAdd — эта функция вызывается при добавлении нового элемента в массив, упомянутый в foreach.
beforeRemove — эта функция вызывается непосредственно перед удалением элемента из массива, указанного в foreach.
afterRender — Функция, упомянутая здесь, вызывается каждый раз, когда передается foreach и новые записи добавляются в массив.
пример
<!DOCTYPE html>
<head>
<title>KnockoutJS Templating - Use of afterRender Template</title>
<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
type = "text/javascript"></script>
<script src = "https://code.jquery.com/jquery-2.1.3.min.js"
type = "text/javascript"></script>
</head>
<body>
<h2>Friends List</h2>
Here are the Friends from your contact page:
<div data-bind = "template: {
name: 'friend-template',
foreach: friends ,
afterRender: afterProcess
}"></div>
<script type = "text/html" id = "friend-template">
<h3 data-bind = "text: name"></h3>
<p>Contact Number: <span data-bind = "text: contactNumber"></span></p>
<p>Email-id: <span data-bind = "text: email"></span></p>
<button data-bind = "click: $root.removeContact">remove </button>
</script>
<script type = "text/javascript">
function MyViewModel() {
self = this;
this.friends = ko.observableArray ([
{ name: 'Smith', contactNumber: 4556750345, email: 'smith123@gmail.com' },
{ name: 'Jack', contactNumber: 6789358001, email: 'jack123@yahoo.com' },
])
this.afterProcess = function(elements, data){
$(elements).css({color: 'magenta' });
}
self.removeContact = function() {
self.friends.remove(this);
}
}
var vm = new MyViewModel();
ko.applyBindings(vm);
</script>
</body>
</html>
Выход
Давайте выполним следующие шаги, чтобы увидеть, как работает приведенный выше код —
-
Сохраните приведенный выше код в файле template-afterrender.htm .
-
Откройте этот файл HTML в браузере.
-
Здесь функция afterProcess выполняется каждый раз, когда передается foreach.
Сохраните приведенный выше код в файле template-afterrender.htm .
Откройте этот файл HTML в браузере.
Здесь функция afterProcess выполняется каждый раз, когда передается foreach.
Выбор шаблона динамически
Если доступно несколько шаблонов, один из них можно выбрать динамически, указав имя в качестве наблюдаемого параметра. Следовательно, значение шаблона будет переоцениваться при изменении параметра имени, а данные, в свою очередь, будут перерисовываться.
пример
<!DOCTYPE html>
<head>
<title>KnockoutJS Templating - Dynamic Template</title>
<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
type = "text/javascript"></script>
</head>
<body>
<h2>Friends List</h2>
Here are the Friends from your contact page:
<div data-bind = "template: {
name: whichTemplate,
foreach: friends
}"></div>
<script type = "text/html" id = "only-phon">
<h3 data-bind = "text: name"></h3>
<p>Contact Number: <span data-bind = "text: contactNumber"></span></p>
</script>
<script type = "text/html" id = "only-email">
<h3 data-bind = "text: name"></h3>
<p>Email-id: <span data-bind = "text: email"></span></p>
</script>
<script type = "text/javascript">
function MyViewModel() {
this.friends = ko.observableArray ([
{
name: 'Smith',
contactNumber: 4556750345,
email: 'smith123@gmail.com',
active: ko.observable(true)
},
{
name: 'Jack',
contactNumber: 6789358001,
email: 'jack123@yahoo.com',
active: ko.observable(false)
},
]);
this.whichTemplate = function(friends) {
return friends.active() ? "only-phon" : "only-email";
}
}
var vm = new MyViewModel();
ko.applyBindings(vm);
</script>
</body>
</html>
Выход
Давайте выполним следующие шаги, чтобы увидеть, как работает приведенный выше код —
-
Сохраните приведенный выше код в файле template-dynamic.htm .
-
Откройте этот файл HTML в браузере.
-
Используемый шаблон определяется в зависимости от значения активного флага.
Сохраните приведенный выше код в файле template-dynamic.htm .
Откройте этот файл HTML в браузере.
Используемый шаблон определяется в зависимости от значения активного флага.
Использование внешних строковых движков
Собственные шаблоны отлично работают с различными элементами потока управления, даже с вложенными блоками кода. KO также предлагает способ интеграции с внешней библиотекой шаблонов, такой как Underscore templating Engine или JQuery.tmpl.
Как упоминалось на официальном сайте, JQuery.tmpl больше не находится в активной разработке с декабря 2011 года. Следовательно, родные шаблоны KO рекомендуется использовать только вместо JQuery.tmpl или любого другого механизма шаблонов на основе строк.
Пожалуйста, обратитесь к официальному сайту для более подробной информации об этом.