Components (组件)是一个强大的,干净的方式组织您的UI代码,可重复使用的块。 :

  • …可以表示单独的控件/窗口小部件或应用程序的整个部分
  • …包含自己的视图,通常(但可选)自己的视图模型
  • …可以预加载或通过AMD或其他模块系统异步加载(按需)
  • …可以接收参数,并可选地将更改写回到它们或调用回调
  • …可以一起组成(嵌套)或继承自其他组件
  • …可以轻松地打包,以便跨项目进行重用
  • …让您定义自己的约定/逻辑进行配置和加载

此模式有利于大型应用程序,因为它通过明确的组织和封装简化了开发,并通过根据需要增量式加载应用程序代码和模板来帮助提高运行时性能。

自定义元素是用于消费组件的可选但方便的语法。 不需要使用绑定注入组件的占位符<div>,您可以使用具有自定义元素名称的更多自描述标记(例如,<voting-button>或<product-editor>)。 Knockout小心确保兼容性,即使与旧的浏览器,如IE 6。

示例1:喜欢/不喜欢小部件

可以使用ko.components.register注册组件(技术上,注册是可选的,但它是最简单的入门方式)。 组件定义指定一个viewModel和模板。 例如:

ko.components.register('like-widget', {
viewModel: function(params) {
// Data: value is either null, 'like', or 'dislike'
this.chosenValue = params.value; // Behaviors
this.like = function() { this.chosenValue('like'); }.bind(this);
this.dislike = function() { this.chosenValue('dislike'); }.bind(this);
},
template:
'<div class="like-or-dislike" data-bind="visible: !chosenValue()">\
<button data-bind="click: like">Like it</button>\
<button data-bind="click: dislike">Dislike it</button>\
</div>\
<div class="result" data-bind="visible: chosenValue">\
You <strong data-bind="text: chosenValue"></strong> it\
</div>'
});

通常,您将从外部文件加载视图模型和模板,而不是像这样声明它们。

现在,要使用此组件,您可以从应用程序中的任何其他视图引用它,可以使用组件绑定或使用自定义元素。 下面是一个使用它作为自定义元素的实例:

UI源码:

<ul data-bind="foreach: products">
<li class="product">
<strong data-bind="text: name"></strong>
<like-widget params="value: userRating"></like-widget>
</li>
</ul>

视图模型源码:

function Product(name, rating) {
this.name = name;
this.userRating = ko.observable(rating || null);
} function MyViewModel() {
this.products = [
new Product('Garlic bread'),
new Product('Pain au chocolat'),
new Product('Seagull spaghetti', 'like') // This one was already 'liked'
];
} ko.components.register('like-widget', {
viewModel: function(params) {
// Data: value is either null, 'like', or 'dislike'
this.chosenValue = params.value; // Behaviors
this.like = function() { this.chosenValue('like'); }.bind(this);
this.dislike = function() { this.chosenValue('dislike'); }.bind(this);
},
template:
'<div class="like-or-dislike" data-bind="visible: !chosenValue()">\
<button data-bind="click: like">Like it</button>\
<button data-bind="click: dislike">Dislike it</button>\
</div>\
<div class="result" data-bind="visible: chosenValue">\
You <strong data-bind="text: chosenValue"></strong> it\
</div>'
}); ko.applyBindings(new MyViewModel());

在本示例中,组件可以显示和编辑一个名为“产品视图模型类”上的“用户评级”的observable属性。

示例2:根据需要从外部文件加载类似/不喜欢小部件

在大多数应用程序中,您需要将组件视图模型和模板保留在外部文件中。 如果将Knockout配置为通过AMD模块加载器(如require.js)获取它们,那么可以预加载(可能捆绑/缩减)或根据需要增量加载它们。

下面是一个配置示例:

ko.components.register('like-or-dislike', {
viewModel: { require: 'files/component-like-widget' },
template: { require: 'text!files/component-like-widget.html' }
});

要求

为了这个工作,文件files / component-like-widget.js和files / component-like-widget.html需要存在。 检查出来(并查看源代码上的.html) - 正如你将看到的,这是更清洁和更方便的,包括定义中的内联代码。

此外,您需要引用一个合适的模块加载器库(例如require.js)或实现一个知道如何抓取您的文件的自定义组件加载器。

使用组件

现在喜欢或不喜欢可以像以前一样使用组件绑定或自定义元素:

Add a product

UI源码:

<ul data-bind="foreach: products">
<li class="product">
<strong data-bind="text: name"></strong>
<like-or-dislike params="value: userRating"></like-or-dislike>
</li>
</ul>
<button data-bind="click: addProduct">Add a product</button>

视图模型源码:

function Product(name, rating) {
this.name = name;
this.userRating = ko.observable(rating || null);
} function MyViewModel() {
this.products = ko.observableArray(); // Start empty
} MyViewModel.prototype.addProduct = function() {
var name = 'Product ' + (this.products().length + 1);
this.products.push(new Product(name));
}; ko.applyBindings(new MyViewModel());

如果您在首次单击“添加产品”之前打开浏览器开发人员工具的“网络检查器”,您会看到组件的.js / .html文件在首次需要时被抓取,然后保留以供重用。

KnockoutJS 3.X API 第六章 组件(1) 组件和自定义元素 - 概述的更多相关文章

  1. KnockoutJS 3.X API 第六章 组件(4) 自定义元素

    自定义元素提供了一种将组件注入视图的方便方法. 本节目录 介绍 例子 传递参数 父组件和子组件之间的通信 传递监控属性的表达式 将标记传递到组件中 控制自定义元素标记名称 注册自定义元素 备注1:将自 ...

  2. KnockoutJS 3.X API 第六章 组件(5) 高级应用组件加载器

    无论何时使用组件绑定或自定义元素注入组件,Knockout都将使用一个或多个组件装载器获取该组件的模板和视图模型. 组件加载器的任务是异步提供任何给定组件名称的模板/视图模型对. 本节目录 默认组件加 ...

  3. KnockoutJS 3.X API 第六章 组件(3) 组件绑定

    组件绑定将指定的组件注入到元素中,并且可选地将参数传递给它. 本节目录 一个例子 API 组件生命周期 备注1:仅限模板组件 备注2:使用没有容器元素的组件 备注3:将标记传递给组件 处置和内存管理 ...

  4. KnockoutJS 3.X API 第六章 组件(2) 组件注册

    要使Knockout能够加载和实例化组件,必须使用ko.components.register注册它们,从而提供如此处所述的配置. 注意:作为替代,可以实现一个自定义组件加载器(自定义加载器下一节介绍 ...

  5. KnockoutJS 3.X API 第五章 高级应用(1) 创建自定义绑定

    您不仅限于使用内置的绑定,如click,value绑定等,您可以创建自己的绑定. 这是如何控制视图模型如何与DOM元素进行交互,并且为您提供了大量的灵活性,以便于以复用的方式封装复杂的行为. 注册绑定 ...

  6. 第六章、forms组件

    目录 第六章.forms组件 一.注册功能手写 二.forms组件完整写法 基本使用 三.forms组件前端渲染标签组件 三.forms组件其他知识点 在python console测试 校验数据 f ...

  7. KnockoutJS 3.X API 第七章 其他技术(8) 异步错误处理

    注意:本文档适用于Knockout 3.4.0及更高版本. ko.onError Knockout包装内部异步调用,并在抛出原始错误之前查找可选的ko.onError回调以执行(如果遇到异常). 这使 ...

  8. KnockoutJS 3.X API 第五章 高级应用(3) 虚拟元素绑定

    注意:这是一种高级技术,通常仅在创建可重用绑定的库时使用. 这不是你通常需要做的时候使用Knockout构建应用程序. Knockout的控制流绑定(例如,if和foreach)不仅可以应用于常规DO ...

  9. KnockoutJS 3.X API 第四章 数据绑定(5) 控制流component绑定

    本节目录: 一个例子 API 备注1:仅模板式的component 备注2:component虚拟绑定 备注3:传递标记到component绑定 内存管理 一个例子 First instance, w ...

随机推荐

  1. mysql 数据库可以非本地访问

      GRANT ALL PRIVILEGES ON 数据库名.* TO root@'%' IDENTIFIED BY '密码' WITH GRANT OPTION;

  2. lamp

      Linux+Apache+Mysql/MariaDB+Perl/PHP/Python一组常用来搭建动态网站或者服务器的开源软件,本身都是各自独立 的程序,但是因为常被放在一起使用,拥有了越来越高的 ...

  3. 关于handler 和 looper 的问题

    重新去学习回顾looper和handler ,还是需要重新认识这个经常使用的机制. 我首先是看任玉刚老师的书<android的开发艺术探索>的第十章. 里面一句话开始说出了我们大概的理解— ...

  4. 图的基本遍历算法的实现(BFS & DFS)复习

    #include <stdio.h> #define INF 32767 typedef struct MGraph{ ]; ][]; int ver_num, edge_num; }MG ...

  5. $(document).ready,$(window).load,window.onload区别和联系

    $(document).ready是在dom结构加载完毕就执行. $(window).load 等价于window.onload,必须等到页面内包括图片的所有元素加载完毕后才能执行. $(docume ...

  6. Spring AOP详解

    一.前言 在以前的项目中,很少去关注spring aop的具体实现与理论,只是简单了解了一下什么是aop具体怎么用,看到了一篇博文写得还不错,就转载来学习一下,博文地址:http://www.cnbl ...

  7. Tips

    1)字符串转换数字 ') { ; do{ j*=;j+='); i++; }'); //实际上为读入优化的一部分 2)进制转换万能模板 #include <cstdio> using na ...

  8. SPOJ FASTFLOW网络流水题

    Dinic=bfs+dfs  = = 用bfs算出到原点的最短路径(每条残存都算1) 然后每次都跑两端只差1的路径跑dfs,并且一直跑到不能跑 一个优化:如果一个点流出的量已经到流入量了就可以返回上一 ...

  9. 弱省互测#2 t3

    题意 给出\(n\)个01字节和\(m\)个01字节,要求用后者去匹配前者,两个串能匹配当且仅当除了每个字节末位不同,其他位都要相同.问匹配后者至少有多少个末位不同.(\(1 \le m \le n ...

  10. 关于node.js

    JS是一种脚本语言,它的本身并不能进行编译和执行,在最早的时期只是作为浏览器的脚本,只能够在浏览器中执行操作,也就是说JS必须依赖一个运行环境作为载体才能够执行. 而nodejs是基于chromeV8 ...