KnockoutJS-구성 요소

구성 요소는 대규모 응용 프로그램을 구조화하고 코드 재사용을 촉진하기 위해 UI 코드를 구성하는 거대한 방법입니다.

다른 구성 요소에서 상속되거나 중첩됩니다. 로드 및 구성을 위해 자체 규칙 또는 논리를 정의합니다.

응용 프로그램 또는 프로젝트 전체에서 재사용 할 수 있도록 패키지화됩니다. 애플리케이션 또는 작은 컨트롤 / 위젯의 전체 섹션을 나타냅니다. 요청시로드하거나 미리로드 할 수 있습니다.

부품 등록

구성 요소는 ko.components.register()API. KO에서 구성 요소를로드하고 표시하는 데 도움이됩니다. 등록하려면 구성이있는 구성 요소 이름이 필요합니다. 구성은 viewModel 및 템플릿을 결정하는 방법을 지정합니다.

Syntax

구성 요소는 다음과 같이 등록 할 수 있습니다.

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

• 그만큼 component-name 비어 있지 않은 문자열이 될 수 있습니다.

• viewModel 선택 사항이며 다음 섹션에 나열된 viewModel 형식을 사용할 수 있습니다.

• template 은 필수이며 다음 섹션에 나열된 템플릿 형식을 사용할 수 있습니다.

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;
});

템플릿 지정

다음 표에는 구성 요소를 등록하는 데 사용할 수있는 템플릿 형식이 나열되어 있습니다.

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: ...
});

단일 AMD 모듈로 등록 된 구성 요소

AMD 모듈은 viewModel / 템플릿 쌍을 사용하지 않고 자체적으로 구성 요소를 등록 할 수 있습니다.

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− 컴포넌트는 자체적으로 인스턴스화되지 않으므로 viewmodel 속성은 컴포넌트 외부에서 참조되므로 하위 컴포넌트 viewmodel에 의해 수신됩니다. 예를 들어 다음 구문에서 볼 수 있습니다.ModelValue 자식 viewModel 생성자에 의해 수신되는 부모 viewmodel입니다. ModelProperty.

• Passing observable expressions − params 매개 변수에는 3 개의 값이 있습니다.

  • simpleExpression− 숫자 값입니다. 관찰 가능 항목은 포함되지 않습니다.

  • simpleObservable− 부모 viewModel에 정의 된 인스턴스입니다. 부모 viewModel은 자식 viewModel이 수행 한 Observable에 대한 변경 사항을 자동으로 가져옵니다.

  • observableExpression− Expression은식이 자체적으로 평가 될 때 Observable을 읽습니다. 관찰 가능한 값이 변경되면 표현 결과도 시간이 지남에 따라 변경 될 수 있습니다.

다음과 같이 매개 변수를 전달할 수 있습니다.

<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 파일을 엽니 다.

컴포넌트 로더

컴포넌트 로더는 주어진 컴포넌트 이름에 대해 템플릿 / viewModel 쌍을 비동기 적으로 전달하는 데 사용됩니다.

기본 구성 요소 로더

기본 구성 요소 로더는 명시 적으로 등록 된 구성에 따라 다릅니다. 각 컴포넌트는 컴포넌트를 사용하기 전에 등록됩니다.

ko.components.defaultLoader

컴포넌트 로더 유틸리티 함수

기본 컴포넌트 로더는 다음 기능을 사용하여 읽고 쓸 수 있습니다.

사용자 정의 구성 요소 로더 구현

사용자 컴포넌트 로더는 다음과 같은 방법으로 구현할 수 있습니다.

• getConfig(name, callback)− 이름에 따라 프로그래밍 방식으로 구성을 전달할 수 있습니다. callback (componentConfig)을 호출하여 구성을 전달할 수 있습니다. 여기서 componentConfig 객체는 loadComponent 또는 다른 로더에서 사용할 수 있습니다.

• loadComponent(name, componentConfig, callback)−이 함수는 구성 방식에 따라 구성의 viewModel 및 템플릿 부분을 해결합니다. callback (result)를 호출하여 viewmodel / template 쌍을 전달할 수 있습니다. 여기서 객체 결과는 다음 속성에 의해 정의됩니다.

  • template− 필수. DOM 노드의 배열을 반환합니다.

  • createViewModel(params, componentInfo)− 선택 사항. viewModel 속성이 구성된 방식에 따라 viewModel 개체를 반환합니다.

• loadTemplate(name, templateConfig, callback)− DOM 노드는 사용자 정의 로직을 사용하여 템플릿으로 전달됩니다. object templateConfig는 object componentConfig의 템플릿 속성입니다. callback (domNodeArray)은 DOM 노드의 배열을 전달하기 위해 호출됩니다.

• loadViewModel(name, templateConfig, callback) − viewModel 팩토리는 사용자 정의 로직을 사용하여 viewModel 구성으로 전달됩니다.