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. 【刷题笔记】火车购票-----java方案

    问题描述请实现一个铁路购票系统的简单座位分配算法,来处理一节车厢的座位分配. 假设一节车厢有20排.每一排5个座位.为方便起见,我们用1到100来给所有的座位编号,第一排是1到5号,第二排是6到10号 ...

  2. 对html与body的一些研究与理解

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=259 一.写在前面的最 ...

  3. 第三章 一个简单的机器学习例子让你了解DeepLab的语言风格

    MINST是由Yann LeCun等人建立并维护的手写数字识别数据库.该数据库总共包含60000个训练样本和10000个测试样本.其中每个样本的大小是一张28*28的手写数字图片.数字包括从0~9总共 ...

  4. es6 数组的工具类

    根据Es6中map和Set的特性,实现了对array的分组和转换操作. exports.mapToObj = function (strMap) { let obj = Object.create(n ...

  5. MySQL表的四种分区类型

    MySQL表的四种分区类型 一.什么是表分区 通俗地讲表分区是将一大表,根据条件分割成若干个小表.mysql5.1开始支持数据表分区了. 如:某用户表的记录超过了600万条,那么就可以根据入库日期将表 ...

  6. jquery常见获取高度

    jquery获取文档高度和窗口高度,$(document).height().$(window).height() $(document).height():整个网页的文档高度 $(window).h ...

  7. slf4j的简单介绍

    SLF4J,Simple Logging Facade for JAVA,是一个十分简单的的日志facade,对于不同的日志框架做了一个封装. 对比common logging,Common logg ...

  8. 1001. A+B Format (20)

    原题连接:https://www.patest.cn/contests/pat-a-practise/1001 题目如下: Calculate a + b and output the sum in ...

  9. Android控件之Notification

    Android通知就是让设备在屏幕最顶上那栏里面显示图标,当滑下通知栏之后可以看到列表状的通知选项,有些是"通知"类型的,有些是"正在运行"类型的," ...

  10. android——HttpUrlConnection

    前面了解了下服务端和客户端的相关知识 ,那么他们是通过什么来进行进行连接的呢? Android可以用HttpURLConnection或HttpClient接口来开发http程序.在Android 上 ...