写点什么

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

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

关注

评论

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

直播报名 | 超低延时直播架构解析

百度开发者中心

最佳实践 方法论 活动 直播

支持 10 亿日流量的基础设施:当 Apahce APISIX 遇上腾讯

腾源会

腾讯云 开源 APISIX OTeam

阿里独家!GitHub上点击量超百万的「操作系统和计算机网络」PDF震撼开源

Java 程序员 面试 计算机 Alibaba

如何做竞品分析?

石云升

产品经理 产品思维 9月日更 产品分析

与顶级互联网公司技术大佬面对面聊聊RocketMQ吧!

阿里巴巴中间件

阿里云 开源 RocketMQ 云原生 中间件

Vite + Vue3 + OpenLayers 同步两个地图基础操作

德育处主任

大前端 Web 地图 vite openlayers

redis--数据库实现

en

中小企业自媒体为何难做:定位不准期望值过高

石头IT视角

一朵云、一张网、一体化 ——GRTN 打造最佳流媒体场景实践

阿里云视频云

云计算 阿里云 边缘计算 视频云 流媒体传输

首个RISC-V计算机芯片现身欧洲处理器计划

WorkPlus

【重磅】Apache InLong(incubating) 发布 0.10.0 版本

腾源会

Apache 开源 InLong

DPDK分析学习之全网唯一的DPDK教学课程丨虚拟化高性能专家之路

Linux服务器开发

网络协议 虚拟化 Linux服务器开发 DPDK 高性能网络

自建开源Cassandra与GaussDB(for Cassandra)性能对比测试报告

华为云数据库小助手

性能分析 GaussDB 华为云数据库 GaussDB(for Cassandra) 开源Cassandra

Webrtc ICE 框架

webrtc developer

WebRTC p2p ICE

如何高效掌控K8s资源变化?K8s Informer实现机制浅析

腾源会

云原生 k8s

2021下半年全新京东商城亿级并发架构设计,不学习你就OUT了!!

Java 程序员 面试 计算机 京东

我的9年开源之路:395 Patch、20+Feature,背后只有努力与热爱

腾源会

腾讯云 开源 虚拟化 Linux内核 kvm

工业互联网的两种极端想法和两点反思

iNeuOS工业互联网操作系统

大数据 物联网 智能制造 iNeuOS工业互联网

数字化的田亩里,华为正写一首陶渊明的诗

脑极体

这本Alibaba“绝密”SpringBoot精髓到底厉害在哪里

Java 程序员 面试 springboot 计算机

T-BOX专业分享

SOA开发者

丧心病狂!阿里内部Spring Cloud高薪笔记流失,GitHub夜获星百万

Java 程序员 面试 计算机 阿里巴巴‘

残疾人大学生就业难?「低代码」应用,让就业更简单!

优秀

低代码

如何用时序数据库 CTSDB 与 TARS 结合,解决海量监控数据难题

腾源会

数据库 大数据 开源 TARS CTSDB

大众汽车迟到的软件优先思维

SOA开发者

被 Docker 日志坑惨了

AlwaysBeta

Docker 容器 运维

Nebula Graph 源码解读系列 | Vol.01 Nebula Graph Overview

NebulaGraph

Alibaba竟流出全套的Java核心技术手册,看过的人都说好!

Java 程序员 架构 面试 计算机

云信小课堂 | 聊天室内容审核很头疼?3步解决!

网易云信

人工智能 AI 视频

从技术到商业:2021 DEMO CHINA创新中国峰会正式开启

创业邦

Micro Focus 发布年度安全运营报告,洞察后疫情时代企业安全运营新趋势

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