美文网首页
Knockout.js官方文档学习

Knockout.js官方文档学习

作者: luichooy | 来源:发表于2016-11-07 11:34 被阅读151次

监测

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

相关文章

  • Knockout.js官方文档学习

    监测 knockout的三个核心特点 监测与依赖跟踪 声明式绑定 模板 在本文档中,你将学习三个特点中的第一个。但...

  • React Native学习笔记之Style和Size

    本人始终认为最好最权威的学习资料就应该是官方文档Style官方文档Size官方文档CSS参考文档 Style学习 ...

  • jieba分词模块学习

    jieba分词,学习,为了全面了解该模块,,预设学习路线:官方文档——优秀博客文章——实践学习 官方文档部分 (文...

  • Graphql 学习与REST比较

    学习链接: 官方英文文档 官方中文文档 一、graphql 初体验 官方定义: A query language ...

  • flutter 学习目录

    基础 Dart学习 官方文档(英文) 官方文档(译文不全) 依赖的配置(官方) 插件的官方网站 Json to D...

  • 2019-10-22 httprunner学习笔记(1)

    httprunner官方文档:https://cn.httprunner.org/以下是根据官方文档的学习和操作 ...

  • mongoose官方文档学习

    一.mongodb学习准备 1.1First be sure you have MongoDB and Node....

  • NSPredicate官方文档学习

    谓词提供可可指定查询的通用方法。谓词系统能够处理大量的域,包括核心数据和聚焦。本文档描述谓词在一般情况下,它们的使...

  • Pytorch官方文档学习

    1.简单堆叠网络的定义方法 torch.nn.Sequential等于keras的model.sequential...

  • ReactiveSwift 官方文档学习

    Event 基本构成 event: 事件流的基本传递单元事件流的构成:任意个value event,以及一个可选的...

网友评论

      本文标题:Knockout.js官方文档学习

      本文链接:https://www.haomeiwen.com/subject/eexouttx.html