AICon上海|与字节、阿里、腾讯等企业共同探索Agent 时代的落地应用 了解详情
写点什么

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

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

关注

评论

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

TCP性能分析与调优策略

程序员 计算机网络 网络协议

Java垃圾回收GC概览

Java JVM GC

Java程序员必备,Github上星标55.9k的微服务神级笔记简直太香了,学完感觉自己又行了!

Java架构之路

Java 程序员 架构 面试 编程语言

可以解除程序员中年危机的职业规划

Java架构师迁哥

云计算简史(完整版)

明道云

马士兵老师首推Java七条自学路线,自学到底能不能行?自学也能拿到40W年薪?

Java架构追梦

Java 架构 面试 马士兵 项目实战

当代开发者的六大真实现状,你被哪一个场景“戳中”了?

华为云开发者联盟

开发者 调研 报告

阿里云视频云实时字幕技术,助力英雄联盟S10全球总决赛

阿里云CloudImagine

游戏开发 直播 语音识别 字幕

【T1543.003】利用 ACL 隐藏恶意 Windows 服务

比伯

Java 大数据 编程 架构 计算机

非线性声学回声如何破解?华为云硬核技术为你解决

华为云开发者联盟

算法 音视频

Redis基础—了解Redis是如何做数据持久化的

数据库 redis 编程 计算机

JVM真香系列:轻松掌握JVM运行时数据区

田维常

JVM

Docker

完美!阿里P8都赞不绝口的世界独一份489页SQL优化笔记

Java~~~

Java 数据库 程序员 架构师 SQL优化

《迅雷链精品课》第二课:区块链核心技术框架

迅雷链

区块链

涨薪神作!华为内部操作系统与网络协议笔记爆火,Java程序员有福了

Java架构之路

Java 程序员 面试 编程语言

区块链产业,怎样“链”住未来?

CECBC

区块链

Pulsar Summit Asia 2020 中文专场议题出炉!

Apache Pulsar

大数据 开源 Apache Pulsar

把最新JAVA面试真题(阿里/字节跳动/美团)整理出来,却被自己菜哭了,赶紧去刷题了

Java架构追梦

Java 阿里巴巴 架构 面试

anyRTC Flutter SDK :全面实现跨平台音视频互动

anyRTC开发者

音视频 WebRTC RTC sdk 安卓

IPFS云算力挖矿系统开发技术

薇電13242772558

区块链 IPFS

从一场“众盟科技云滇之播”,我们发现了美食直播的商业与公益价值

人称T客

cglib入门后篇

Rayjun

Java cglib

5G为数字化转型插上翅膀

CECBC

5G网络安全

京东技术中台Flutter实践之路(二)

京东科技开发者

开源 中台 大前端 Web UI

「Java并发编程」从源码分析几道必问线程池的面试题?

Java架构师迁哥

数字人民币都来了 黄金还有什么用?

CECBC

数字货币

LeetCode题解:剑指 Offer 22. 链表中倒数第k个节点,使用数组,JavaScript,详细注释

Lee Chen

算法 大前端 LeetCode

【算法题目解析】杨氏矩阵数字查找

程序员架构进阶

算法 二分查找 杨氏矩阵

从零到千万用户,我是如何一步步优化MySQL数据库的?

冰河

数据库 架构 性能优化 分布式数据库 分布式存储

简要分析近几年商业软件开发平台的现状

Philips

敏捷开发 快速开发 企业应用

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