KnockoutJS - Thành phần

Các thành phần là một cách rất lớn để tổ chức mã giao diện người dùng để cấu trúc một ứng dụng lớn và thúc đẩy khả năng tái sử dụng mã.

Nó được kế thừa hoặc lồng ghép từ thành phần khác. Để tải và cấu hình, nó xác định các quy ước hoặc logic của riêng nó.

Nó được đóng gói để sử dụng lại trong toàn bộ ứng dụng hoặc dự án. Trình bày các phần hoàn chỉnh của ứng dụng hoặc các điều khiển / tiện ích nhỏ. Nó có thể được tải hoặc tải trước theo yêu cầu.

Đăng ký thành phần

Các thành phần có thể đăng ký bằng cách sử dụng ko.components.register()API. Nó giúp tải và biểu diễn các thành phần trong KO. Tên thành phần với cấu hình được mong đợi để đăng ký. Cấu hình chỉ định cách xác định viewModel và mẫu.

Syntax

Các thành phần có thể được đăng ký như sau:

ko.components.register('component-name', {
   viewModel: {...},    //function code
   template: {....)	//function code
});
  • Các component-name có thể là bất kỳ chuỗi trống nào.

  • viewModel là tùy chọn và có thể sử dụng bất kỳ định dạng viewModel nào được liệt kê trong các phần tiếp theo.

  • template là bắt buộc và có thể sử dụng bất kỳ định dạng mẫu nào được liệt kê trong các phần tiếp theo.

Nêu một ViewModel

Bảng sau liệt kê các định dạng viewModel có thể được sử dụng để đăng ký các thành phần.

Sr.No. viewModel Forms & Description
1

constructor function

Nó tạo một đối tượng viewModel riêng cho từng thành phần. Đối tượng hoặc chức năng được sử dụng để liên kết trong chế độ xem thành phần.

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

shared object instance

Cá thể đối tượng viewModel được chia sẻ. Thuộc tính instance được chuyển để sử dụng đối tượng trực tiếp.

var sharedViewModelInstance = { ... };

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

createViewModel

Nó gọi một hàm hoạt động như một nhà máy và có thể được sử dụng như một mô hình khung nhìn có thể trả về một đối tượng.

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

AMD module

Nó là một định dạng mô-đun để xác định các mô-đun trong đó mô-đun và các phần phụ thuộc đều được tải không đồng bộ.

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

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

   return MyViewModel;
});

Nêu mẫu

Bảng sau liệt kê các định dạng mẫu có thể được sử dụng để đăng ký các thành phần.

Sr.No. Biểu mẫu
1

element ID

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

element instance

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

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

string of markup

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

DOM nodes

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

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

document fragement

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

AMD module

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

Các thành phần được đăng ký dưới dạng một mô-đun AMD duy nhất

Mô-đun AMD có thể tự đăng ký một thành phần mà không cần sử dụng cặp viewModel / template.

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

Ràng buộc thành phần

Có hai cách liên kết thành phần.

  • Full syntax- Nó truyền tham số và đối tượng cho thành phần. Nó có thể vượt qua bằng cách sử dụng các thuộc tính sau.

    • name - Nó thêm tên thành phần.

    • params - Nó có thể truyền nhiều tham số trong đối tượng trên thành phần.

<div data-bind='component: {
   name: "tutorials point",
   params: { mode: "detailed-list", items: productsList }
}'>
</div>
  • Shorthand syntax - Nó chuyển chuỗi dưới dạng tên thành phần và nó không bao gồm tham số trong đó.

<div data-bind = 'component: "component name"'></div>
  • Template-only components - Các thành phần chỉ có thể xác định mẫu mà không chỉ định viewModel.

ko.components.register('component name', {
   template:'<input data-bind = "value: someName" />,
});
  • Using Component without a container element- Các thành phần có thể được sử dụng mà không cần sử dụng thêm phần tử thùng chứa. Điều này có thể được thực hiện bằng cách sử dụngcontainerless flow điều khiển tương tự như thẻ nhận xét.

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

Yếu tố tùy chỉnh

Phần tử tùy chỉnh là một cách để hiển thị một thành phần. Tại đây, bạn có thể viết trực tiếp tên phần tử đánh dấu tự mô tả thay vì xác định trình giữ chỗ, nơi các thành phần được liên kết thông qua nó.

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

Thông số vượt qua

paramsthuộc tính được sử dụng để truyền tham số cho thành phần viewModel. Nó tương tự như thuộc tính data-bind. Nội dung của thuộc tính params được hiểu giống như một đối tượng JavaScript theo nghĩa đen (giống như thuộc tính data-bind), vì vậy bạn có thể chuyển các giá trị tùy ý thuộc bất kỳ loại nào. Nó có thể truyền tham số theo những cách sau:

  • Communication between parent and child components- Thành phần không được khởi tạo bởi chính nó, do đó các thuộc tính của khung nhìn được tham chiếu từ bên ngoài thành phần và do đó sẽ được nhận bởi khung nhìn thành phần con. Ví dụ: bạn có thể thấy trong cú pháp sauModelValue là mô hình khung nhìn mẹ, được nhận bởi phương thức khởi tạo viewModel con ModelProperty.

  • Passing observable expressions - Nó có ba giá trị trong tham số params.

    • simpleExpression- Nó là một giá trị số. Nó không liên quan đến bất kỳ vật thể quan sát nào.

    • simpleObservable- Nó là một thể hiện được định nghĩa trên viewModel cha. ViewModel mẹ sẽ tự động nhận các thay đổi trên viewModel con có thể quan sát được.

    • observableExpression- Biểu thức đọc có thể quan sát được khi biểu thức được đánh giá bởi chính nó. Khi giá trị quan sát được thay đổi, thì kết quả của biểu thức cũng có thể thay đổi theo thời gian.

Chúng ta có thể chuyển các tham số như sau:

<some-component
   params = 'simpleExpression: 1 + 1,
      simpleObservable: myObservable,
      observableExpression: myObservable() + 1'>
</some-component>

Chúng ta có thể chuyển các tham số trong viewModel như sau:

<some-component
   params = 'objectValue:{a: 3, b: 2},
      dateValue: new date(),
      stringValue: "Hi",
      numericValue:123,
      boolValue: true/false,
      ModelProperty: ModelValue'>
</some-component>

Chuyển đánh dấu vào các thành phần

Đánh dấu nhận được được sử dụng để tạo một thành phần và được chọn làm một phần của đầu ra. Các nút sau được chuyển như một phần của đầu ra trong mẫu thành phần.

template: { nodes: $componentTemplateNodes }

Kiểm soát tên thẻ phần tử tùy chỉnh

Tên mà bạn đăng ký trong các thành phần sử dụng ko.components.register, cùng một tên tương ứng với tên thẻ phần tử tùy chỉnh. Chúng tôi có thể thay đổi tên thẻ phần tử tùy chỉnh bằng cách ghi đè nó để kiểm soát bằng cách sử dụnggetComponentNameForNode.

ko.components.getComponentNameForNode = function(node) {
   ...
   ...   //function code
   ...
}

Đăng ký các phần tử tùy chỉnh

Các phần tử tùy chỉnh có thể được cung cấp ngay lập tức, nếu trình tải thành phần mặc định được sử dụng và do đó thành phần được đăng ký bằng ko.components.register. Nếu chúng tôi không sử dụngko.components.registervà triển khai trình tải thành phần tùy chỉnh, sau đó phần tử tùy chỉnh có thể được sử dụng bằng cách xác định bất kỳ tên phần tử nào được lựa chọn. Không cần chỉ định cấu hình khi bạn đang sử dụngko.components.register vì trình tải thành phần tùy chỉnh không sử dụng nó nữa.

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

Hãy thực hiện các bước sau để xem mã trên hoạt động như thế nào -

  • Lưu mã trên vào component_register.htm tập tin.

  • Mở tệp HTML này trong trình duyệt.

Máy xúc thành phần

Bộ tải thành phần được sử dụng để truyền không đồng bộ cặp template / viewModel cho tên thành phần đã cho.

Trình tải thành phần mặc định

Bộ tải thành phần mặc định phụ thuộc vào cấu hình đã đăng ký rõ ràng. Mỗi thành phần được đăng ký trước khi sử dụng thành phần.

ko.components.defaultLoader

Chức năng tiện ích của trình tải thành phần

Bộ nạp thành phần mặc định có thể đọc và ghi bằng các chức năng sau.

Sr.No. Chức năng tiện ích & Mô tả
1

ko.components.register(name, configuration)

Thành phần đã được đăng ký.

2

ko.components.isRegistered(name)

Nếu tên thành phần cụ thể đã được đăng ký, thì nó sẽ trả về là true, ngược lại là false.

3

ko.components.unregister(name)

Tên thành phần bị xóa khỏi sổ đăng ký.

4

ko.components.get(name, callback)

Hàm này lần lượt đến từng bộ tải đã đăng ký để tìm ai đã vượt qua định nghĩa viewModel / template cho tên thành phần như trước. Sau đó, nó trả về khai báo viewModel / template bằng cách gọicallback. Nếu trình tải đã đăng ký không thể tìm thấy bất cứ điều gì về thành phần, thì nó sẽ gọicallback(null).

5

ko.components.clearCachedDefinition(name)

Hàm này có thể được gọi khi chúng ta muốn xóa mục nhập bộ nhớ cache thành phần đã cho. Nếu thành phần này là cần thiết vào lần sau, một lần nữa người nạp sẽ được tham khảo ý kiến.

Triển khai trình tải thành phần tùy chỉnh

Trình tải thành phần tùy chỉnh có thể được triển khai theo những cách sau:

  • getConfig(name, callback)- Tùy thuộc vào các tên, chúng ta có thể chuyển các cấu hình theo chương trình. Chúng ta có thể gọi callback (componentConfig) để chuyển các cấu hình, trong đó đối tượng componentConfig có thể được loadComponent hoặc bất kỳ trình tải nào khác sử dụng.

  • loadComponent(name, componentConfig, callback)- Chức năng này giải quyết viewModel và phần mẫu của cấu hình tùy thuộc vào cách nó được cấu hình. Chúng ta có thể gọi callback (kết quả) để chuyển cặp viewmodel / template, trong đó kết quả đối tượng được xác định bởi các thuộc tính sau.

    • template- Bắt buộc. Trả về mảng các nút DOM.

    • createViewModel(params, componentInfo)- Không bắt buộc. Trả về đối tượng viewModel tùy thuộc vào cách cấu hình thuộc tính viewModel.

  • loadTemplate(name, templateConfig, callback)- Các nút DOM được chuyển vào một mẫu sử dụng logic tùy chỉnh. Đối tượng templateConfig là một thuộc tính của mẫu từ một object componentConfig. callback (domNodeArray) được gọi để chuyển một mảng các nút DOM.

  • loadViewModel(name, templateConfig, callback) - Nhà máy viewModel được chuyển vào cấu hình viewModel bằng cách sử dụng logic tùy chỉnh.