写点什么

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:132986
用户头像

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

关注

评论

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

介绍几种 MySQL 官方高可用方案

Simon

MySQL 数据库 MySQL高可用

突发,OpenAI宣布终止对中国提供服务,影响在哪里?

AR玩家

openai GPT Rokid Vision pro 炬目AR

🚀 快速上手LangChain开发实战:1小时内掌握《Generative AI with LangChain》的核心!

Epsilla

人工智能 AI langchain rag Epsilla

自研一款共享集群数据库,有多难?

极客天地

【开发者推荐】告别繁琐:一键解锁国产ETL新贵,Kettle的终结者

敏捷调度TASKCTL

kettle 国产数据库 TASKCTL 数据集成平台

三大国际产业与标准组织正式成立,引领全球产业创新与发展

最新动态

原生鸿蒙,激活数字内容一池活水

最新动态

如何玩转云端文生视频、0码构建AI应用?华为云专家来揭秘

华为云开发者联盟

人工智能 云原生 华为云 华为云开发者联盟 企业号2024年6月PK榜

低代码+定制:优化项目管理的新方案

天津汇柏科技有限公司

项目管理 低代码 软件开发定制

Linux 下的性能监控与分析技巧

左诗右码

Linux

观测云产品更新 | Pipelines、智能监控、日志数据访问等

观测云

智能监控 pipelines

KaiwuDB 事务中的 Raft 协议

KaiwuDB

数据一致性 raft协议 KaiwuDB

Apache Flink类型及序列化研读&生产应用|得物技术

得物技术

flink 技术分享 企业号2024年6月PK榜

通过搭建 24 点小游戏应用实战,带你了解 AppBuilder 的技术原理

百度Geek说

企业号 6 月 PK 榜 AI 原生云 AppBuilder

TDengine 新能源行业研讨会上都说了啥?精彩回顾!

TDengine

数据库 tdengine 时序数据库

接口测试:Mock 工具与定制化

测试人

软件测试 Mock

移动通信产业,需要通往AI时代的“波托兰海图”

脑极体

通信

Visio文件编辑查看工具:Visio Viewer for Mac 激活版

你的猪会飞吗

mac软件下载

火山引擎ByteHouse:新一代云数仓必不可少的五大核心能力

字节跳动数据平台

数据库 大数据 云原生 Clickhouse 数仓

文献解读-基因编辑-第十二期|《CRISPR-detector:快速、准确地检测、可视化和注释基因组编辑事件引起的全基因组范围突变》

INSVAST

基因数据分析 生信服务 基因编辑

利用反射API和AOP实现业务逻辑的自动化重构

技术冰糖葫芦

API Explorer API boy api 货币化 API 文档

Databend 怎么看 OpenAI 收购实时数仓 Rockset?

Databend

SSH安全远程登录与端口转发

左诗右码

SSH

漫步5G-A City,一份独属于上海的浪漫

脑极体

未来LED显示屏方向:超薄、散热、柔性

Dylan

国际化 LED显示屏 全彩LED显示屏 户外LED显示屏 led显示屏厂家

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