写点什么

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

  • 2014-08-31
  • 本文字数:1660 字

    阅读完需:约 5 分钟

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-08-31 14:132996
用户头像

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

关注

评论

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

架构师训练营——第三周作业

jiangnanage

学习总结—第三周

于江水

极客大学架构师训练营

架构师训练营 第三周 作业

一雄

极客大学架构师训练营 作业 第三周

关于区块链的那些事,看完可以防忽悠

CECBC

分布式 区块链技术 共识与信任

单例模式和组合模式练习

jason

案例篇:服务吞吐量下降很厉害,怎么分析?

程序员老王

职能合约将如何在未来掀起一场革命?

CECBC

智能合约 区块链技术 去中心化 防篡改 自动执行

单例模式的三种

王锟

第三周学习总结

赵龙

「架构师训练营」第 3 周 学习总结

guoguo 👻

极客大学架构师训练营

环信大学:AI赋能万亿"618",0成本轻松5步开启您的智慧客服之旅

DT极客

老板不断加需求、改需求的四种应对方法

金刚小书童

项目管理 需求管理

命题作业—第三周

于江水

极客大学架构师训练营

架构师训练营第三周课后作业

Cloud.

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

不谈

极客大学架构师训练营

新基建核心技术人才缺口将达420万

CECBC

新基建 人才缺口 核心技术人才

第三章 课后作业

姜 某某

架构师训练营第三周课后作业

不谈

极客大学架构师训练营

Apache Zeppelin:可能是开源届最好的Flink开发平台

Geek_8o1tcx

大数据 flink 流计算 Zeppelin

架构师培训营第三周总结

王锟

设计模式是架构师的必备武器

老姜

「架构师训练营」第 3 周作业

旭东(Frank)

极客大学架构师训练营 作业

第 3 周 - 学习总结

大海

第三周作业

田振宇

几种设计模式的使用场景

Acker飏

极客大学架构师训练营

数据库周刊29│2020数据库研究报告;Oracle取消今年技术大会;腾讯云DBbridge发布支持一键迁库;饿了么迁至阿里云;PG数组查询;Oracle被比特币勒索;DM8 安全管理…

墨天轮

MySQL 数据库 postgresql 腾讯云 阿里云

第三周作业

赵龙

探探上当代单身青年的倔强

脑极体

百度CTO的故事中,藏着中国AI的底色

脑极体

架构师三期作业

老姜

第三周总结

Linuxer

Knockout组件能够帮助你更好地安排应用的代码结构_JavaScript_Roopesh Shenoy_InfoQ精选文章