开工福利|免费学 2200+ 精品线上课,企业成员人人可得! 了解详情
写点什么

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

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

关注

评论

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

交通银行签约易观千帆,全面升级数智能力

易观分析

金融 银行 经济

软件测试 | XML响应断言

测吧(北京)科技有限公司

测试

软件测试/测试开发 | 做为测试,那些不得不掌握的测试技术体系

测试人

软件测试 自动化测试 测试开发

软件测试 | JSON Schema断言

测吧(北京)科技有限公司

软件测试 | From请求

测吧(北京)科技有限公司

测试

【网易云信】海量并发低延时 RTC-CDN 系统架构设计(下)

网易智企

IM RTC 实时音视频

软件测试 | 接口请求构造

测吧(北京)科技有限公司

测试

软件测试 | Header cookie处理

测吧(北京)科技有限公司

测试

软件测试/测试开发 | 这些常用测试平台,你们公司在用的是哪些呢?

测试人

软件测试 自动化测试 测试开发

HarmonyOS Connect认证测试

HarmonyOS开发者

HarmonyOS

软件测试 | josn和XML请求

测吧(北京)科技有限公司

测试

软件测试 | 接口自动化测试代理配置

测吧(北京)科技有限公司

测试

《Linux命令行与shell脚本编程大全》有奖书评活动!

图灵教育

Linux shell脚本编程

缤纷三月,安势信息邀您共话企业开源风险治理

安势信息

开源 安全合规 清源CleanSource SCA 安势信息 开源风险治理

软件测试/测试开发 | 测试人员必须掌握的测试用例

测试人

软件测试 自动化测试 测试开发 测试用例

2023AIOTE智博会 第十五届上海国际智慧城市、物联网、大数据博览会

InfoQ_caf7dbb9aa8a

热点2023第十五届上海国际智慧工地展览会

InfoQ_caf7dbb9aa8a

《Linux命令行与shell脚本编程大全》有奖书评活动!

图灵社区

Linux shell脚本编程 shell脚本

Deltatech Gaming Ltd. 携手 F5 缔造更安全的在线游戏体验

F5 Inc

安全 游戏 waf

BlueShore Financial 通过 F5 筑起财务安全防线

F5 Inc

自动化 金融 WAAP

软件测试/测试开发 | 黑盒测试方法论—等价类

测试人

软件测试 自动化测试 测试开发 测试用例 测试方法

AI2023第十五届上海国际人工智能展览会

InfoQ_caf7dbb9aa8a

软件测试 | JSON响应断言

测吧(北京)科技有限公司

测试

软件测试 | 接口自动化测试超时处理

测吧(北京)科技有限公司

测试

软件测试 | 接口测试文件上传测试

测吧(北京)科技有限公司

测试

手把手教大家在 gRPC 中使用 JWT 完成身份校验

江南一点雨

Java gRPC

详解神经网络基础部件BN层

华为云开发者联盟

人工智能 华为云 企业号 2 月 PK 榜 华为云开发者联盟

软件测试 | 接口测试断言

测吧(北京)科技有限公司

测试

海量并发低延时 RTC-CDN 系统架构设计(下)

网易云信

实时音视频

软件测试/测试开发 | 黑盒测试方法论—边界值

测试人

软件测试 自动化测试 测试开发 测试用例 测试方法

Bytebase:让数据库管理和协作变得无缝

天黑黑

MySQL 云原生 dba 数据库管理工具

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