写点什么

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

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

关注

评论

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

云原生(三) | Docker篇之轻松学会 Docker命令

Lansonli

Docker 云原生 7月月更

mac 本地安装spark

飞哥

大数据 spark 数据仓库

一款代替Typora的软件---MarkText

IT蜗壳-Tango

7月月更

什么是hpaPaaS平台?低代码和hpaPaaS是什么关系?

优秀

低代码

瑞云与宜宾职院开展校企合作,同深圳VR联合会共建元宇宙产业学院

3DCAT实时渲染

职业教育 虚拟现实 虚拟仿真 元宇宙

阿里云架构师马继雨:云超算解决方案全面助力生命科学行业普惠增效

阿里云弹性计算

高性能计算 生命科学 EHPC

小程序遇上Flutter 3.0

Geek_99967b

flutter 小程序

React Table 表格组件使用教程 排序、分页、搜索过滤筛选功能实战开发

蒋川

排序 React 表格 组件库

Flutter 实现小姐姐渐现动画效果

岛上码农

flutter ios 前端 安卓开发 7月月更

hive on spark 和 spark on hive

飞哥

大数据 spark hive

云原生(四) | Docker篇之网络和存储原理

Lansonli

Docker 云原生

【刷题记录】8. 字符串转换整数 (atoi)

WangNing

7月月更

数据库系统设计:分区

华为云开发者联盟

数据库 系统设计 开发 分区

一位 sealer maintainer 的心路历程

阿里巴巴云原生

阿里云 开源 云原生 sealer

「阿里云 RocketMQ 系列公开课」重磅来袭!

阿里巴巴云原生

Apache 阿里云 RocketMQ 云原生 直播

深度揭秘阿里云函数计算异步任务能力

阿里巴巴云原生

阿里云 Serverless 云原生 异步 函数计算

普通二本院校如何从所谓的从寒冬破冰?

KEY.L

7月月更

WebRTC 音频抗弱网技术(下)

融云 RongCloud

编译器优化那些事儿(4):归纳变量

openEuler

openEuler 毕昇 JDK 开源操作系统 编译器 加速器 编程语言

mac 本地hive2 安装

飞哥

大数据 hadoop hive

大数据15周作业

Asha

基于ResNet50实现宫颈细胞病变分类

逝缘~

分类神经网络 7月月更

几种跨平台方案的对比

Geek_99967b

小程序 跨平台

设计稳定的微服务系统时不得不考虑的场景

阿里巴巴云原生

阿里云 微服务 云原生 OpenSergo

避坑:@Around与@Transactional混用导致事务不回滚

Paul

Spring Boot 2 事务失效 spring aop Java’

聊聊 API 管理-开源版 Yapi 到 SaaS 版 Apifox

Liam

3DCAT投屏功能升级,助力企业营销与培训

3DCAT实时渲染

虚拟仿真 实时云渲染 3DCAT 企业营销 实时渲染云

6. 对象存储

MASA技术团队

C# .net 对象存储 框架 Framework

长安链研究笔记-证书生成工具

长安链

使用 doscify 将文章写成文档一般丝滑

宁在春

GitHub Pages docsify 7月月更

机器学习-西瓜书小记

AIWeker

机器学习 7月月更

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