写点什么

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

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

关注

评论

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

有一种自我欺骗,叫只为孩子

zhoo299

随笔杂谈 家庭

“庆俞年”大战,真正受损的不是李国庆

北柯

创业 合伙人 创业者 互联网人 当当网

高效程序员的45个习惯:敏捷开发修炼之道(3)

石云升

读书笔记 敏捷开发 无限游戏

影响音视频延迟的关键因素(一):流媒体系统

ZEGO即构

TCP udp RTC HLS RTMP

大数据技术发展(二):Hadoop 技术生态圈的发展

cristal

Java 大数据 hadoop hadoop3

ST在keil下开发时候文件options配置的一些小技巧

良知犹存

嵌入式

搭载十代酷睿i7处理器,这台ROG冰刃4新锐拥有媲美台式游戏电脑的性能

最新动态

一个虚拟世界里栽树的公司及其启示

郭华

技术 商业模式 电影

nginx报错worker_connections are not enough

Java联盟

nginx

nginx 报错 accept4 () failed (24:Too many open files)

Java联盟

nginx

跟我一起基于Karma搭建一个测试环境(下)

Jack Q

大前端 测试框架 Karma

《精益创业》摘要

孙苏勇

书摘 精益创业

一文吃透PHP进程信号处理

书旅

php Linux 信号

SpreadJS 纯前端表格控件应用案例:集成 Odoo提升企业ERP表格功能

葡萄城技术团队

开源 SpreadJS Odoo

Flink所需组件-1

小知识点

scala 大数据 flink 流计算

吃透Laravel的Ioc容器

书旅

laravel 容器 ioc

云原生架构的基石

soolaugust

Docker 架构 Kubernetes 容器 云原生

Python3 for ... else ...陷阱

wangkx

Python Python PEP

系统不可用总结

不在调上

草脸识别,AI泡沫还是皇冠明珠?

郭华

人工智能 AI 商业 解决方案

2w字 + 40张图带你参透并发编程!

苹果看辽宁体育

Java 后端 并发

为什么一旦自己创业了,很难再回到公司去坐班?

北柯

创业 互联网 创业心态 上班 上班族

丐帮,少林,明教,武当!看看你数据分析的技能属于哪一派?

程序员生活志

错误的存储方案正吞噬你的成本

jinjin

为啥PHP in_array(0,['a', 'b', 'c']) 返回为true?

架构精进之路

php 弱类型语言

四种主要的 IO 模型

一盐难进

Netty io 网络

写代码爬取了某 Hub 资源,只为撸这个鉴黄平台!

程序员生活志

教程 Hub 资源

Spring 为啥默认把bean设计成单例的?这篇讲的明明白白的

程序员生活志

学习的深度 & 深度的学习

北风

学习

大厂面试必读,JAVA进阶神书《深入理解Java虚拟机》第三版更新内容全曝光!

华章IT

JVM 虚拟机 周志明 Java虚拟机 jvm调优

"工科生"的浪漫 百度大脑语言与知识技术峰会在七夕向你发出参会邀请

百度大脑

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