阿里P10 关涛(观滔)邀你探讨新一代数据平台的架构迭代方向,戳此了解。 了解详情
写点什么

Knockout 组件能够帮助你更好地安排应用的代码结构

2014 年 8 月 31 日

Knockout 最近发布了 3.2.0 版本,这次更新最大的改进之一就是引入了组件(Component)的概念,通过配合使用组件与自定义元素(Custom element),你能够方便地将应用分解为可重用的小部件(widget)、区域(section)或页面。

组件能够将一个视图模型(View model)与一个模板组合为一个封装包,这方面的例子可以是一个导航栏或者是进度面板。你可以使用“组件绑定”将这些组件与普通的div 元素绑定在一起,不过还有一种更为强大的用法存在:你可以在应用中使用自定义元素

举个例子来说明一下,你可以按照如下方式定义一个组件(需要注意的是,在真实的项目中,你应该将视图与视图模型分别定义在不同的文件中):

复制代码
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>'

随后,你可以在视图中配合定义了“products”这个属性的视图模型使用这个组件:

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

这种方式的优势在于,这个 like-widget 可以在多个地方进行重用,并且相关的所有逻辑也进行了独立的封装。将应用程序进行分解多个组件,可以大大简化代码的创建、理解与维护难度。

这种方式与 AngularJS 的理念非常相似,后者也是通过自定义组件的方式对 html 元素进行功能扩展。此外,这种方式也类似于 WebComponents标准中关于自定义元素的这一节内容,该标准现在还在不断改进中。总的来说,开发者们对于这个新特性的出现感到十分兴奋

此次更新还带来了其它一些改进:

  • ko.pureComputed - 这是 ko.computed 的一种变体形式,它提供了更好的性能与内存管理方式。这一特性只对推断式可观察对象(computed observable)有效,这种对象在推断结果时不会造成任何副作用,而且它的结果完全是由应用中其它可观察对象的值产生的。换句话说,这一特性要求这种推断式可观察对象的值不能够受到任何来自于整个依赖跟踪体系结构之外的隐藏值或是状态值的影响。
  • 新的“textInput”绑定,它能够将元素或
2014 年 8 月 31 日 14:132254
用户头像

发布了 428 篇内容, 共 151.0 次阅读, 收获喜欢 23 次。

关注

评论

发布
暂无评论
发现更多内容

第11周总结

Vincent

极客时间 极客大学

第四课系统架构课后作业

Geek_michael

极客大学架构师训练营

Linux的信号

菜鸟小sailor 🐕

c++

第11周作业

Vincent

极客时间 极客大学

如何设计大型互联网系统架构

天天向上

极客大学架构师训练营

迭代开发中的微服务拆分

码猿外

架构 微服务 微服务拆分 架构演进

架构师训练营第四周学习总结

吴传禹

极客大学架构师训练营

架构师训练营第四周作业

吴传禹

极客大学架构师训练营

面试多次被拒,‘两个月’61天,我收到了蚂蚁金服P7级的offer

周老师

Java 编程 程序员 架构 面试

大区块链的必然性

CECBC区块链专委会

区块链技术

用Python绘制地理图

计算机与AI

Python 绘图

视读——沟通的艺术,看入人里,看出人外(第四章)

废材姑娘

每天都要写吗?

Nydia

典型的大型互联网应用方案

garlic

极客大学架构师训练营

Flink时间服务和计时器-6-5

小知识点

scala 大数据 flink

架构师训练营第四周作业

我是谁

极客大学架构师训练营

手把手教你分析Mysql死锁问题

捡田螺的小男孩

MySQL 死锁

大型互联网系统常用的技术方案

天天向上

极客大学架构师训练营

第四周总结

Geek_ac4080

Week 3学习总结

balsamspear

极客大学架构师训练营

一次用户故事地图之旅

Bruce Talk

敏捷开发 用户故事 Product Owner 用户故事地图

十五、深入Python输入和输出

刘润森

Python

区块链要如何解决供应链金融痛点?

CECBC区块链专委会

区块链 金融

甲方日常 32

句子

随笔杂谈

十六、深入Python字符串

刘润森

Python

马化腾的区块链理想

CECBC区块链专委会

区块链 马化腾

给新入职工程师的10条建议

supernova

管理 职场 工作方式

Week 3命题作业

balsamspear

极客大学架构师训练营

自学编程,看书还是视频?

沉默王二

程序员 读书 自学编程 视频

职场求生攻略答疑篇之 4 —— 社会有多真实,人心就有多虚伪

臧萌

职场 职场成长

三步法解析Express源码

执鸢者

面试 前端 Node Express

Knockout组件能够帮助你更好地安排应用的代码结构-InfoQ