KnockoutJS - Компоненты
Компоненты - отличный способ организации кода пользовательского интерфейса для структурирования большого приложения и обеспечения возможности повторного использования кода.
Он унаследован или вложен от другого компонента. Для загрузки и конфигурации он определяет свои собственные соглашения или логику.
Он упакован для повторного использования в приложении или проекте. Представляет полные разделы приложения или небольшие элементы управления / виджеты. Он может быть загружен или предварительно загружен по запросу.
Регистрация компонентов
Компоненты можно регистрировать с помощью ko.components.register()API. Это помогает загружать и представлять компоненты в KO. Имя компонента с конфигурацией ожидается для регистрации. В конфигурации указывается, как определить модель представления и шаблон.
Syntax
Компоненты могут быть зарегистрированы следующим образом -
ko.components.register('component-name', {
viewModel: {...}, //function code
template: {....) //function code
});
В component-name может быть любой непустой строкой.
viewModel является необязательным и может принимать любой из форматов viewModel, перечисленных в следующих разделах.
template является обязательным и может принимать любой из форматов шаблонов, перечисленных в следующих разделах.
Заявление ViewModel
В следующей таблице перечислены форматы viewModel, которые можно использовать для регистрации компонентов.
Sr. No. | Формы и описание viewModel |
---|---|
1 | constructor function Он создает отдельный объект viewModel для каждого компонента. Объект или функция используются для привязки в представлении компонентов. |
2 | shared object instance Экземпляр объекта viewModel является общим. Свойство экземпляра передается для непосредственного использования объекта. |
3 | createViewModel Он вызывает функцию, которая действует как фабрика и может использоваться как модель представления, которая может возвращать объект. |
4 | AMD module Это формат модуля для определения модулей, в которых модуль и зависимости загружаются асинхронно. |
Заявление шаблона
В следующей таблице перечислены форматы шаблонов, которые можно использовать для регистрации компонентов.
Sr. No. | Формы шаблонов |
---|---|
1 | element ID |
2 | element instance |
3 | string of markup |
4 | DOM nodes |
5 | document fragement |
6 | AMD module |
Компоненты, зарегистрированные как один модуль AMD
Модуль AMD может зарегистрировать компонент самостоятельно без использования пары viewModel / template.
ko.components.register('component name',{ require: 'some/module'});
Связывание компонентов
Есть два способа привязки компонентов.
Full syntax- Он передает параметр и объект компоненту. Он может пройти, используя следующие свойства.
name - Добавляет имя компонента.
params - Он может передавать несколько параметров в объект компонента.
<div data-bind='component: {
name: "tutorials point",
params: { mode: "detailed-list", items: productsList }
}'>
</div>
Shorthand syntax - Он передает строку как имя компонента и не включает в себя параметр.
<div data-bind = 'component: "component name"'></div>
Template-only components - Компоненты могут определять только шаблон без указания viewModel.
ko.components.register('component name', {
template:'<input data-bind = "value: someName" />,
});
Using Component without a container element- Компоненты можно использовать без использования дополнительного элемента контейнера. Это можно сделать с помощьюcontainerless flow элемент управления, аналогичный тегу комментария.
<!--ko.component: ""-->
<!--/ko-->
Пользовательский элемент
Пользовательский элемент - это способ визуализации компонента. Здесь вы можете напрямую написать самоописательное имя элемента разметки вместо определения заполнителя, через который компоненты связываются.
<products-list params = "name: userName, type: userType"></products-list>
Переданный параметр
paramsАтрибут используется для передачи параметра компоненту viewModel. Он похож на атрибут привязки данных. Содержимое атрибута params интерпретируется как литерал объекта JavaScript (точно так же, как атрибут привязки данных), поэтому вы можете передавать произвольные значения любого типа. Он может передавать параметр следующими способами -
Communication between parent and child components- Компонент не создается сам по себе, поэтому на свойства модели просмотра ссылаются извне компонента и, таким образом, они будут получены моделью просмотра дочернего компонента. Например, в следующем синтаксисе вы можете увидеть, чтоModelValue является родительской моделью представления, которую получает конструктор дочерней модели представления ModelProperty.
Passing observable expressions - В параметре params есть три значения.
simpleExpression- Это числовое значение. Он не включает никаких наблюдаемых.
simpleObservable- Это экземпляр, определенный в родительской модели viewModel. Родительский viewModel автоматически получит изменения наблюдаемого, сделанные дочерним viewModel.
observableExpression- Expression читает наблюдаемое, когда выражение вычисляется само по себе. Когда наблюдаемое значение изменяется, результат выражения также может меняться со временем.
Мы можем передать параметры следующим образом -
<some-component
params = 'simpleExpression: 1 + 1,
simpleObservable: myObservable,
observableExpression: myObservable() + 1'>
</some-component>
Мы можем передать параметры в viewModel следующим образом:
<some-component
params = 'objectValue:{a: 3, b: 2},
dateValue: new date(),
stringValue: "Hi",
numericValue:123,
boolValue: true/false,
ModelProperty: ModelValue'>
</some-component>
Передача разметки в компоненты
Полученная разметка используется для создания компонента и выбирается как часть вывода. Следующие узлы передаются как часть вывода в шаблоне компонента.
template: { nodes: $componentTemplateNodes }
Управление именами тегов настраиваемых элементов
Имена, которые вы регистрируете в компонентах, используя ko.components.register, то же имя соответствует именам тегов настраиваемых элементов. Мы можем изменить имена тегов пользовательских элементов, переопределив их для управления с помощьюgetComponentNameForNode.
ko.components.getComponentNameForNode = function(node) {
...
... //function code
...
}
Регистрация пользовательских элементов
Пользовательские элементы могут быть доступны немедленно, если используется загрузчик компонентов по умолчанию и, следовательно, компонент зарегистрирован с использованием ko.components.register. Если мы не используемko.components.registerи реализуя загрузчик пользовательских компонентов, пользовательский элемент можно использовать, задав любое имя элемента по выбору. Когда вы используетеko.components.register поскольку загрузчик нестандартных компонентов больше не использует его.
ko.components.register('custom-element', { ......... });
Example
<!DOCTYPE html>
<head>
<title>KnockoutJS Components</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
</head>
<body>
<!--params attribute is used to pass the parameter to component viewModel.-->
<click params = "a: a, b: b"></click>
<!--template is used for a component by specifying its ID -->
<template id = "click-l">
<div data-bind = "text: a"></div>
<!--Use data-bind attribute to bind click:function() to ViewModel. -->
<button data-bind = "click:function(){callback(1)}">Increase</button>
<button data-bind = "click:function(){callback(-1)}">Decrease</button>
</template>
<script>
//Here components are registered
ko.components.register('click', {
viewModel: function(params) {
self = this;
this.a = params.a;
this.b = params.b;
this.callback = function(num) {
self.b(parseInt(num));
self.a( self.a() + parseInt(num) );
};
},
template: { element: 'click-l' }
});
//keeps an eye on variable for any modification in data
function viewModel() {
this.a = ko.observable(2);
this.b = ko.observable(0);
}
ko.applyBindings(new viewModel() );
</script>
</body>
</html>
Output
Давайте выполним следующие шаги, чтобы увидеть, как работает приведенный выше код -
Сохраните приведенный выше код в component_register.htm файл.
Откройте этот HTML-файл в браузере.
Загрузчики компонентов
Загрузчики компонентов используются для асинхронной передачи пары шаблон / модель представления для заданного имени компонента.
Загрузчик компонентов по умолчанию
Загрузчик компонентов по умолчанию зависит от явно зарегистрированной конфигурации. Каждый компонент регистрируется перед использованием компонента.
ko.components.defaultLoader
Функции утилиты загрузчика компонентов
Загрузчик компонентов по умолчанию может читать и писать, используя следующие функции.
Sr. No. | Служебные функции и описание |
---|---|
1 | ko.components.register(name, configuration) Компонент зарегистрирован. |
2 | ko.components.isRegistered(name) Если конкретное имя компонента уже зарегистрировано, оно возвращается как истина, иначе ложь. |
3 | ko.components.unregister(name) Название компонента удаляется из реестра. |
4 | ko.components.get(name, callback) Эта функция по очереди обращается к каждому зарегистрированному загрузчику, чтобы определить, кто первым передал определение viewModel / template для имени компонента. Затем он возвращает объявление viewModel / template, вызываяcallback. Если зарегистрированный загрузчик ничего не может найти о компоненте, он вызываетcallback(null). |
5 | ko.components.clearCachedDefinition(name) Эта функция может быть вызвана, когда мы хотим очистить данную запись в кэше компонента. Если компонент понадобится в следующий раз, снова обратятся к загрузчикам. |
Реализация пользовательского загрузчика компонентов
Загрузчик пользовательских компонентов может быть реализован следующими способами:
getConfig(name, callback)- В зависимости от названий мы можем передавать конфигурации программно. Мы можем вызвать обратный вызов (componentConfig) для передачи конфигураций, где объект componentConfig может использоваться loadComponent или любым другим загрузчиком.
loadComponent(name, componentConfig, callback)- Эта функция разрешает viewModel и часть шаблона конфигурации в зависимости от того, как она настроена. Мы можем вызвать обратный вызов (результат) для передачи пары viewmodel / template, где результат объекта определяется следующими свойствами.
template- Обязательно. Возвращает массив узлов DOM.
createViewModel(params, componentInfo)- Необязательно. Возвращает объект viewModel в зависимости от того, как было настроено свойство viewModel.
loadTemplate(name, templateConfig, callback)- Узлы DOM передаются в шаблоне с использованием настраиваемой логики. Объект templateConfig - это свойство шаблона из объекта componentConfig. callback (domNodeArray) вызывается для передачи массива узлов DOM.
loadViewModel(name, templateConfig, callback) - Фабрика viewModel передается в конфигурации viewModel с использованием настраиваемой логики.