KnockoutJS — Компоненты

Компоненты — это огромный способ организации кода пользовательского интерфейса для структурирования большого приложения и обеспечения повторного использования кода.

Он наследуется или вкладывается от другого компонента. Для загрузки и настройки он определяет свои собственные соглашения или логику.

Он упакован для повторного использования в приложении или проекте. Представляет полные разделы приложения или небольшие элементы управления / виджеты. Он может быть загружен или предварительно загружен по требованию.

Регистрация компонентов

Компоненты могут зарегистрироваться с помощью API ko.components.register () . Это помогает загружать и представлять компоненты в KO. Имя компонента с конфигурацией ожидается для регистрации. Конфигурация определяет, как определить viewModel и шаблон.

Синтаксис

Компоненты могут быть зарегистрированы следующим образом —

ko.components.register('component-name', {
   viewModel: {...},    //function code
   template: {....)	//function code
});

• Имя компонента может быть любой непустой строкой.

• viewModel является необязательным и может принимать любой из форматов viewModel, перечисленных в следующих разделах.

• Шаблон обязателен и может принимать любой из форматов шаблонов, перечисленных в следующих разделах.

Имя компонента может быть любой непустой строкой.

viewModel является необязательным и может принимать любой из форматов viewModel, перечисленных в следующих разделах.

Шаблон обязателен и может принимать любой из форматов шаблонов, перечисленных в следующих разделах.

Заявление модели представления

В следующей таблице перечислены форматы viewModel, которые можно использовать для регистрации компонентов.

function SomeComponentViewModel(params) {
   this.someProperty = params.something;
}
ko.components.register('component name', {
   viewModel: SomeComponentViewModel,
   template: ...
});

var sharedViewModelInstance = { ... };

ko.components.register('component name', {
   viewModel: { instance: sharedViewModelInstance },
   template: ...
});

ko.components.register('component name', {  
   viewModel: {  
      createViewModel: function (params, componentInfo) {  
         ...       //function code  
         ...
      }  
   },  
   template: ....  
});

ko.components.register('component name', {
   viewModel: { require: 'some/module/name' },
   template: ...
});

define(['knockout'], function(ko) {
   function MyViewModel() {
      // ...
   }

   return MyViewModel;
});

функция конструктора

Он создает отдельный объект viewModel для каждого компонента. Объект или функция используется для привязки в представлении компонентов.

экземпляр общего объекта

Экземпляр объекта viewModel является общим. Свойство экземпляра передается для непосредственного использования объекта.

createViewModel

Он вызывает функцию, которая действует как фабрика и может использоваться как модель представления, которая может возвращать объект.

Модуль AMD

Это формат модуля для определения модулей, где модуль и зависимости загружаются асинхронно.

Заявление шаблона

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

ko.components.register('component name', {
   template: { element: 'component-template' },
   viewModel: ...
});

var elemInstance = document.getElementById('component-template');

ko.components.register('component name', {
   template: { element: elemInstance },
   viewModel: ...
});

ko.components.register('component name', {
   template: '<input data-bind = "value: yourName" />\
      <button data-bind = "click: addEmp">Add Emp </button>',
   viewModel: ...
});

var emp = [
   document.getElementById('node 1'),
   document.getElementById('node 2'),
];

ko.components.register('component name', {
   template: emp,
   viewModel: ...
});

ko.components.register('component name', {
   template: someDocumentFragmentInstance,
   viewModel: ...
});

ko.components.register('component name', {
   template: { require: 'some/template' },
   viewModel: ...
});

идентификатор элемента

экземпляр элемента

строка разметки

DOM-узлы

подделка документов

Модуль AMD

Компоненты, зарегистрированные как один модуль AMD

Модуль AMD может зарегистрировать компонент самостоятельно, не используя пару viewModel / template.

ko.components.register('component name',{ require: 'some/module'});

Связывание компонентов

Существует два способа связывания компонентов.

• Полный синтаксис — передает параметр и объект компоненту. Это может пройти, используя следующие свойства.

  • name — добавляет имя компонента.

  • params — может передавать несколько параметров в объекте компонента.

Полный синтаксис — передает параметр и объект компоненту. Это может пройти, используя следующие свойства.

name — добавляет имя компонента.

params — может передавать несколько параметров в объекте компонента.

<div data-bind='component: {
   name: "tutorials point",
   params: { mode: "detailed-list", items: productsList }
}'>
</div>

• Сокращенный синтаксис — передает строку как имя компонента и не включает в себя параметр.

Сокращенный синтаксис — передает строку как имя компонента и не включает в себя параметр.

<div data-bind = 'component: "component name"'></div>

• Компоненты только для шаблона — Компоненты могут определять только шаблон без указания viewModel.

Компоненты только для шаблона — Компоненты могут определять только шаблон без указания viewModel.

ko.components.register('component name', {
   template:'<input data-bind = "value: someName" />,
});

• Использование компонента без элемента контейнера — компоненты могут использоваться без использования дополнительного элемента контейнера. Это можно сделать с помощью управления потоком без контейнера, которое похоже на тег комментария.

Использование компонента без элемента контейнера — компоненты могут использоваться без использования дополнительного элемента контейнера. Это можно сделать с помощью управления потоком без контейнера, которое похоже на тег комментария.

<!--ko.component: ""-->
<!--/ko-->

Таможенный элемент

Пользовательский элемент — это способ визуализации компонента. Здесь вы можете непосредственно написать самоописательное имя элемента разметки вместо определения заполнителя, где компоненты связаны через него.

<products-list params = "name: userName, type: userType"></products-list>

Передача параметра

Атрибут params используется для передачи параметра компоненту viewModel. Это похоже на атрибут привязки данных. Содержимое атрибута params интерпретируется как литерал объекта JavaScript (так же, как атрибут привязки данных), поэтому вы можете передавать произвольные значения любого типа. Он может передать параметр следующими способами —

• Связь между родительским и дочерним компонентами — компонент не создается сам по себе, поэтому свойства viewmodel ссылаются извне компонента и, таким образом, будут получены дочерним компонентом viewmodel. Например, в следующем синтаксисе вы можете видеть, что ModelValue является родительской моделью представления, которая принимается дочерним конструктором viewModel ModelProperty .

• Передача наблюдаемых выражений — имеет три значения в параметре params.

  • simpleExpression — это числовое значение. Это не связано с какими-либо наблюдаемыми.

  • simpleObservable — это экземпляр, который определен в родительском viewModel. Родительский viewModel автоматически получит изменения в observable, сделанные дочерним viewModel.

  • observableExpression — выражение считывает наблюдаемое, когда выражение оценивается само по себе. Когда наблюдаемое значение изменяется, то результат выражения также может меняться со временем.

Связь между родительским и дочерним компонентами — компонент не создается сам по себе, поэтому свойства viewmodel ссылаются извне компонента и, таким образом, будут получены дочерним компонентом viewmodel. Например, в следующем синтаксисе вы можете видеть, что ModelValue является родительской моделью представления, которая принимается дочерним конструктором viewModel ModelProperty .

Передача наблюдаемых выражений — имеет три значения в параметре params.

simpleExpression — это числовое значение. Это не связано с какими-либо наблюдаемыми.

simpleObservable — это экземпляр, который определен в родительском viewModel. Родительский viewModel автоматически получит изменения в observable, сделанные дочерним viewModel.

observableExpression — выражение считывает наблюдаемое, когда выражение оценивается само по себе. Когда наблюдаемое значение изменяется, то результат выражения также может меняться со временем.

Мы можем передать параметры следующим образом —

<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', { ......... });

пример

Live Demo

<!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>

ko.components.defaultLoader