当前位置: 首页 > 工具软件 > Knockout.js > 使用案例 >

Knockoutjs-关于components

孔权
2023-12-01
 
 
components可以作为widgets来呈现,它包含了自己独立的view,能够被预加载或者通过异步的方式加载,能够接受参数并返回结果,可继承于其他组件,也可被重用。
 
通过使用components,我们可以使用自定义的语义化标签来代替<div>,这种方式在旧的浏览器下同样可以实现兼容。
 
一个组件中包含了viewmodel和template,所以在使用的时候需要像这样的方式来注册组件:
 
1 ko.components.register( 'component-name' , {
2     viewModel : something… ,
3     template : something… 
4 });
  其中,组件名称使用小写的单词,并以短线连接的形式,这样就可应被当作元素来使用;
  viewModel是可选的,如果没有的话,这个组件也就等同于一段HTML代码;
  template是必不可少的。
 
  • viewmodel的构建可以有多种方式
1 构造函数的方式
     在此方式下,会为每个组件分别创建实例,也就是每个都有单独的viewmodel对象。
 
2 共享对象实例的方式
     如果想要使多个组件共享同一个viewmodel的实例,可以使用如下的方式:
1  var shareViewModelInstance = {...};
2  ko.components.register( 'my-component' , {
3      viewModel : { instance : shareViewModelInstance },
4      template : ...
5  });
 
3 工厂函数模式
     在绑定到viewmodel之前,对所关联的元素进行某些操作
1 ko.components.register(' my-component' , {
2     viewModel: {
3         createViewModel: function(params, componentInfo){
4             return new MyViewModel( params );
5         }     
6     },
7     template: ...
8 });
    
 4 文件加载模式
     类似使用require.js 文件
1 ko.components.register(
2     viewModel: { require: 'some/module/name' },
3     template: ...
4 )
在加载进来的文件中可以使用以上任意的模式
格式:
1 define( ['knockout'], function(ko){
2       function MyViewModel(){
3                ...
4       }
5       return MyViewModel;
6       // return { instance: new MyViewModel()};
7       //...
8 });

 

 
 
  • template的构建方式
1 使用ID来调用模板
1 <template id='component-template'>
2      <h1>...</h1>
3 </template>
1 ko.components.register('my-component',{
2      template: {element: 'component-template'},
3      viewModel: ...
4 });
  其中<template>元素会被浏览器忽略,<template>内部的元素才会被当作是模板的一部分。
 
2 使用  var elementInstance = document.getElementById('component-template') 获取template
 
3 使用标签组成的字符串  template : '<h1 data-bind="text: title"></h1>' 
 
4 使用DOM节点的数组创建
5 外部引入文件
template:{ require: '/some/template'}
     template:{ require: 'text!path/file.html'}

 

 
  • 设定component的同步或异步加载方式

      synchronous: true 

    默认为false,异步加载

 

转载于:https://www.cnblogs.com/mansu/p/4444934.html

 类似资料: