KnockoutJS - Шаблоны
Templateпредставляет собой набор элементов DOM, которые можно использовать повторно. Шаблоны упрощают создание сложных приложений благодаря свойству минимизировать дублирование элементов DOM.
Есть 2 способа создания шаблонов.
Native templating- Этот метод поддерживает привязки потока управления, такие как foreach, with и if. Эти привязки захватывают разметку HTML, существующую в элементе, и используют ее в качестве шаблона для случайных элементов. Для этого шаблона не требуется никакой внешней библиотеки.
String-based templating- KO подключается к стороннему движку для передачи в него значений ViewModel и вставляет полученную разметку в документ. Например, JQuery.tmpl и Underscore Engine.
Syntax
template: <parameter-value>
<script type = "text/html" id = "template-name">
...
... // DOM elemets to be processed
...
</script>Обратите внимание, что type предоставляется как text/html в блоке сценария, чтобы уведомить KO о том, что это не исполняемый блок, а просто блок шаблона, который необходимо визуализировать.
Parameters
Комбинация следующих свойств может быть отправлена как значение параметра в шаблон.
name - Это представляет собой имя шаблона.
nodes- Это представляет собой массив узлов DOM, который будет использоваться в качестве шаблона. Этот параметр игнорируется, если передается параметр имени.
data - Это не что иное, как данные, которые будут отображаться через шаблон.
if - Шаблон будет обслуживаться, если данное условие приводит к истинному или истинному значению.
foreach - Для обслуживания шаблона в формате foreach.
as - Это просто для создания псевдонима в элементе foreach.
afterAdd, afterRender, beforeRemove - Все они предназначены для представления вызываемых функций, которые должны выполняться в зависимости от выполняемой операции.
Наблюдения
Визуализация именованного шаблона
Шаблоны неявно определяются разметкой HTML внутри DOM при использовании с привязками потока управления. Однако при желании вы можете выделить шаблоны в отдельный элемент, а затем ссылаться на них по имени.
Example
<!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: '[email protected]'
};
this.friend2 = {
name: 'Jack',
contactNumber: 6789358001,
email: '[email protected]'
};
}
var vm = new MyViewModel();
ko.applyBindings(vm);
</script>
</body>
</html>Output
Давайте выполним следующие шаги, чтобы увидеть, как работает приведенный выше код -
Сохраните приведенный выше код в template-named.htm файл.
Откройте этот HTML-файл в браузере.
Здесь шаблон друга используется 2 раза.
Использование "foreach" в шаблоне
Ниже приводится пример использования foreach параметр вместе с именем шаблона.
Example
<!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: '[email protected]' },
{ name: 'Jack', contactNumber: 6789358001, email: '[email protected]' },
{ name: 'Lisa', contactNumber: 4567893131, email: '[email protected]' }
]
}
var vm = new MyViewModel();
ko.applyBindings(vm);
</script>
</body>
</html>Output
Давайте выполним следующие шаги, чтобы увидеть, как работает приведенный выше код -
Сохраните приведенный выше код в template-foreach.htm файл.
Откройте этот HTML-файл в браузере.
Здесь элемент управления foreach используется в привязке шаблона.
Создание псевдонима с использованием ключевого слова для элементов foreach
Ниже показано, как можно создать псевдоним для элемента foreach.
<div data-bind = "template: {
name: 'friend-template',
foreach: friends,
as: 'frnz'
}"></div>Обращение к родительским объектам из цикла foreach становится простым путем создания псевдонима. Эта функция полезна, когда код сложный и многоуровневый.
Example
<!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: '[email protected]'
},
{
name: 'Jack',
contactNumber: [ 6789358001, 3456895445 ],
email: '[email protected]'
},
{
name: 'Lisa',
contactNumber: [ 4567893131, 9876456783, 1349873445 ],
email: '[email protected]'
}
]);
}
var vm = new MyViewModel();
ko.applyBindings(vm);
</script>
</body>
</html>Output
Давайте выполним следующие шаги, чтобы увидеть, как работает приведенный выше код -
Сохраните приведенный выше код в template-as-alias.htm файл.
Откройте этот HTML-файл в браузере.
Вместо полного имени массивов используется псевдоним.
Использование afterAdd, beforeRemove и afterRender
Бывают ситуации, когда необходимо запустить дополнительную настраиваемую логику для элементов DOM, созданных шаблоном. В таком случае можно использовать следующие обратные вызовы. Учтите, что вы используете элемент foreach, тогда -
afterAdd - Эта функция вызывается, когда новый элемент добавляется в массив, упомянутый в foreach.
beforeRemove - Эта функция вызывается непосредственно перед удалением элемента из массива, указанного в foreach.
afterRender - Упомянутая здесь функция вызывается каждый раз при рендеринге foreach и добавлении новых записей в массив.
Example
<!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: '[email protected]' },
{ name: 'Jack', contactNumber: 6789358001, email: '[email protected]' },
])
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>Output
Давайте выполним следующие шаги, чтобы увидеть, как работает приведенный выше код -
Сохраните приведенный выше код в template-afterrender.htm файл.
Откройте этот HTML-файл в браузере.
Здесь функция afterProcess выполняется каждый раз при отрисовке foreach.
Выбор шаблона динамически
Если доступно несколько шаблонов, один из них можно выбрать динамически, задав имя как observableпараметр. Следовательно, значение шаблона будет повторно оцениваться при изменении параметра имени и, в свою очередь, данные будут повторно отображаться.
Example
<!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: '[email protected]',
active: ko.observable(true)
},
{
name: 'Jack',
contactNumber: 6789358001,
email: '[email protected]',
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>Output
Давайте выполним следующие шаги, чтобы увидеть, как работает приведенный выше код -
Сохраните приведенный выше код в template-dynamic.htm файл.
Откройте этот HTML-файл в браузере.
Выбор шаблона зависит от активного значения флага.
Использование внешних строковых движков
Собственные шаблоны отлично работают с различными элементами потока управления даже с вложенными блоками кода. KO также предлагает способ интеграции с внешней библиотекой шаблонов, такой как Underscore templating Engine или JQuery.tmpl.
Как упоминалось на официальном сайте, JQuery.tmpl больше не находится в активной разработке с декабря 2011 года. Следовательно, встроенные шаблоны KO рекомендуются только вместо JQuery.tmpl или любого другого механизма шаблонов на основе строк.
Пожалуйста, обратитесь к официальному сайту для получения более подробной информации.