Knockout.js官方文档学习

监测

knockout的三个核心特点

  1. 监测与依赖跟踪
  2. 声明式绑定
  3. 模板

在本文档中,你将学习三个特点中的第一个。但是在这之前,先来解释一下MVVM模型以及View Model的概念。

MVVM and View Models

Model-View-View Model(MVVM)是用来建立用户界面的一种设计模式。它通过将复杂的UI分割成三部分的方式,从而使得UI部分变得简单

  • ** A model:**你的应用程序存储的数据。这个数据反映为对象和业务逻辑中的方法(例如,银行账户有转账功能),并且这个方法独立于任何UI。当你使用KO时,通常你是通过Ajax请求向服务器获取存储的模型数据。
  • A view model:

通过KO创建一个View Model,仅仅只需声明一个JavaScript对象,例如,

var myViewModel = { personName: 'Bob', personAge: 123 };

接着,你可以通过声明式绑定创建一个简单的上面的view model的 view。例如,下面是PersonName的示例

The name is <span data-bind="text: personName"></span>

Activating Knockout

虽然data-bing不是HTML的原生属性,但是它依旧可用(它严格遵从HTML5规范,因此在HTML4中使用也是没有任何问题的,即使验证工具指出它是一个不认识的属性也没关系)。但是由于浏览器不知道它是什么意思,所以你需要使用Knockout来是它工作。使用Knockout,在JS中添加下面的代码:

ko.applyBindings(myViewModel);

你可以将你的JS代码放在HTML文档的后面,也可以放在前面,但是请放在DOM-ready处理函数中,例如jQuery’s $
function

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 176,574评论 25 709
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,743评论 4 61
  • Knockout简介 (Introduction) Knockout是一个轻量级的UI类库,通过应用MVVM模式使...
    白水螺丝阅读 2,885评论 0 2
  • 我对自己说 喝了这瓶可乐 就不要再想你了 可我总是忍不住再弄一瓶可乐来喝。 每一口可乐 每一片思念 都是酸酸的又藏...
    风子宏阅读 1,697评论 0 0
  • 人不是东西,但人确实如东西,一个提提字把人当东西一样提得麻溜溜的。 你为啥老提他(她)? 提他(她)有面子: 他(...
    恋风2016阅读 4,622评论 2 2

友情链接更多精彩内容