直播预约通道开启!2021腾讯数字生态大会邀您共探产业发展新机遇! 了解详情
写点什么

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

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

关注

评论

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

Activiti框架中工作流的生命周期详解!一个BPMN流程示例带你走完项目中流程的生命周期

攻城狮Chova

流程管理 BPMN

六一特辑丨8岁小程序员献礼儿童节:我DIY了聊天机器人,做3D printer,还想和外星人对话!

华为云开发者社区

编程 开发者 代码 机器人 小程序员

如何成为一名拖垮整个团队的产品经理?

冰河

深度思考 产品经理 自我思考 产品经历 技能提升

网络攻防学习笔记 Day30

穿过生命散发芬芳

5月日更 网络攻防

When others give us advice

escray

极客时间 学习笔记 5月日更

工作流部署详细解析!Spring中部署Activiti流程定义的三种姿势

攻城狮Chova

部署图 工作流引擎 5月日更

【Flutter 专题】117 图解 Dismissible 滑动清除 Widget

阿策小和尚

5月日更 Flutter 小菜 0 基础学习 Flutter Android 小菜鸟

react源码解析1.开篇介绍和面试题

全栈潇晨

React React Hooks react源码

架构师实战营 模块五总结

代廉洁

架构实战营

大型系统中的证书管理

张俭

微服务 TLS PaaS

架构实战-模块5作业

大师兄

鸿蒙操作系统发布在即 万物互联时代将给开发者带来更多机遇

科技汇

软件研发中的错误假设

赫杰辉

设计 低代码 研发工具 x-series

重庆区块链公共服务平台—“渝快链”2.0正式发布

浪潮云

java.net.BindException: Address already in use: JVM_Bind解决方案

anuyyy

IDEA javaWeb

一文带你搞懂RPC到底是个啥

万俊峰Kevin

c++ 微服务 RPC RPC 协议实现原理 srp

带你看懂MySQL执行计划

Simon

MySQL 执行计划

开发人员应该害怕低代码吗?

禅道项目管理

程序员 低代码 开发 低代码平台

别把单测玩出“坏味道”

九叔

单元测试 测试 单元测试 单元测试必要性

初探可编程网关 Pipy

张晓辉

代理 网关 服务网格

JWT(auth0):RS256非对称加密算法实现Token的签发、验证

西门阿浪

Java Token RS256

Dubbo Admin 部署

青年IT男

dubbo

Java 面试基础:Java 语言的特点

三掌柜

5月日更

设计微博系统中”微博评论“的高性能高可用计算架构

9527

「Adobe国际认证」关于 Adobe Photoshop启动“选择并遮住”工作区

Adobe国际认证

带你读论文丨异常检测算法及发展趋势分析

华为云开发者社区

深度学习 异常检测算法 深度异常检测算法 深度半监督 群体异常检测

架构师实战营 模块五作业(设计微博评论的高性能高可用计算架构)

代廉洁

架构实战营

业务架构训练营,模块5作业,微博评论高性能架构

好吃不贵

业务架构

从一个HTTP请求来看网络分层原理

IT视界

计算机网络 网络协议 HTTP 网络层

走近设计模式:写代码一定要用设计模式吗?

华为云开发者社区

设计模式 代码 软件设计 面向对象软件 GoF设计模式

6月日更,优质更文,“定制”来袭~

InfoQ写作平台官方

活动专区 6月日更

技术为帆,纵横四海- Lazada技术东南亚探索和成长之旅

技术为帆,纵横四海- Lazada技术东南亚探索和成长之旅

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