BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

Knockout组件能够帮助你更好地安排应用的代码结构

| 作者 Roopesh Shenoy 关注 0 他的粉丝 ,译者 邵思华 关注 3 他的粉丝 发布于 2014年9月1日. 估计阅读时间: 6 分钟 | 如何结合区块链技术,帮助企业降本增效?让我们深度了解几个成功的案例。

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”绑定,它能够将<input>元素或<textarea>元素与一个视图模型的属性进行双向绑定。这种绑定提供了比传统的“value”绑定更强大的功能,因为它能够处理各种用户输入方式,例如自动完成(auto complete)、拖放,以及剪贴板事件等等。
  • 对于复选框与单选框控件,现在使用“value”绑定将能够获得与使用“checkedValue”绑定相同的行为了。这是由于许多人会在应该使用“checkedValue”绑定时错误地使用了“value”绑定,因此这一改动能够保证在你犯错时依然提供了你所期望的行为。而“checkedValue”这一绑定依然可以继续使用。

此外还有一些缺陷修复:你可以阅读一下新版本的发布说明,以获得完整的变更列表。

Knockout是一个JavaScript MVVM类库,它的功能主要体现在声明式的绑定、在DOM与视图模型之间的双向更新、视图模板以及依赖跟踪基础结构。

查看英文原文:Knockout Components to Structure Your Apps Better

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT