红帽白皮书新鲜出炉!点击获取,让你的云战略更胜一筹! 了解详情
写点什么

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

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

关注

评论

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

TDSQL | 云原生时代的数据库技术革命

腾讯云数据库

tdsql 国产数据库

基于SSM+Shiro+Bootstrap实现用户权限管理系统

Bug终结者

Java bootstrap ssm shiro

如何利用测试自动化,实现 DevOps?

SoFlu软件机器人

Android C++系列:Linux Socket编程(一)预备知识

轻口味

android 28天写作 12月日更

云原生应用管理,像管理手机APP一样管理企业应用

北京好雨科技有限公司

PaaS #Kubernetes# 应用管理

再获信通院权威认证,优等生华为云GaussDB数据库凭什么?

华为云开发者联盟

数据库 opengauss 华为云 GaussDB 信通院

权威认可!腾讯云TDSQL通过信通院数据库服务商运维运营服务能力评估

腾讯云数据库

tdsql 国产数据库

如何使用会声会影标题工具制作弹幕效果

懒得勤快

架构训练营毕业设计-电商秒杀系统

李焕之

Linux之mkdir命令

入门小站

Linux

MySQL性能优化:EXPLAIN 执行计划与join

秋水

MySQL性能优化 执行计划 内容合集 签约计划第二季

Linux之pwd命令

入门小站

Linux

讨论:低代码集成OA/ERP/MES系统,或将是企业应用生态的重要一环?

优秀

低代码

【SpringCloud技术专题】「Gateway网关系列」(2)微服务网关服务的Gateway功能配置指南分析

洛神灬殇

api 网关 SpringCloud Gateway netty 12月日更 服务网关

TDengine入驻Rainbond开源应用商店

北京好雨科技有限公司

时序数据库 #Kubernetes# rainbond

TDSQL | ‘‘微盟式’’SaaS,让商业变得更智慧

腾讯云数据库

tdsql 国产数据库

区块链电子合同应用平台开发,区块链电子合同解决方案

电微13828808271

架构实战营-毕业总结

李焕之

运营商行业软件开发| 内容合集

鲸品堂

通信 运营商 技术专题合集

十年所学,终成《代码随想录》!

博文视点Broadview

TDSQL在核心交易系统领域的联合解决方案

腾讯云数据库

tdsql 国产数据库

前端开发MySQL 数据库之数据引擎

@零度

MySQL 前端

使用Git将本地项目添加至Git仓库

Bug终结者

Java 实用工具 gitee git version

在线JSON转GraphQL工具

入门小站

工具

京东白条数据架构进化之路:要在数据的不确定性中探索架构的稳定性

SphereEx

数据库 开源 架构 ShardingSphere 京东白条

详细解读MySQL高性能优化

秋水

MySQL性能优化 内容合集 签约计划第二季

什么是 Java Marker Interface(标记接口)

Jerry Wang

Java jdk volatile 28天写作 12月日更

智慧园区综合管理平台解决方案,智慧平安社区搭建

电微13828808271

Dubbo 框架学习笔记二

风翱

dubbo 12月日更

大数据开发之Spark和Flink的对比(转载)

@零度

大数据 flink spark

我还是很怀念谷歌

张老蔫

28天写作

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