ko.js学习一
一、KO是一个MVVM框架
- 声明式绑定 (Declarative Bindings):使用简明易读的语法很容易地将模型(model)数据关联到DOM元素上。
- UI界面自动刷新 (Automatic UI Refresh):当您的模型状态(model state)改变时,您的UI界面将自动更新。
- 依赖跟踪 (Dependency Tracking):为转变和联合数据,在你的模型数据之间隐式建立关系。
- 模板 (Templating):为您的模型数据快速编写复杂的可嵌套的UI。
下载地址:https://github.com/SteveSanderson/knockout/downloads
二、MVVM
MVVM and View Models
Model-View-View Model (MVVM) 是一种创建用户界面的设计模式。 描述的是如何将复杂的UI用户界面分成3个部分:
- model: 你程序里存储的数据。这个数据包括对象和业务操作(例如:银子账户可以完成转账功能), 并且独立于任何UI。使用KO的时候,通常说是向服务器调用Ajax读写这个存储的模型数据。
- view model: 在UI上,纯code描述的数据以及操作。例如,如果你实现列表编辑,你的view model应该是一个包含列表项items的对象和暴露的add/remove列表项(item)的操作方法。
注意这不是UI本身:它不包含任何按钮的概念或者显示风格。它也不是持续数据模型 – 包含用户正在使用的未保存数据。使用KO的时候,你的view models是不包含任何HTML知识的纯JavaScript 对象。保持view model抽象可以保持简单,以便你能管理更复杂的行为。
- view: 一个可见的,交互式的,表示view model状态的UI。 从view model显示数据,发送命令到view model(例如:当用户click按钮的时候) ,任何view model状态改变的时候更新。
使用KO的时候,你的view就是你带有绑定信息的HTML文档,这些声明式的绑定管理到你的view model上。或者你可以使用模板从你的view model获取数据生成HTML。
三、1.监控属性的读和写
- 读取监控属性(observable)的值,只需要直接调用监控属性(observable)(不需要参数),例如myViewModel.personName() 将返回'Bob', myViewModel.personAge() 将返回 123。
- 写一个新值到监控属性(observable)上,调用这个observable属性并当新值作为参数。例如:调用 myViewModel.personName('Mary') 将更新name值为'Mary'。
- 给一个model对象的多个属性写入新值,你可以使用链式语法。例如: myViewModel.personName('Mary').personAge(50) 将会将name更新为 'Mary' 并且 将age更新为 50.
2.使用依赖监控属性(Dependent Observables)
The name is <span data-bind="text: fullName"></span>
<script>
var viewModel = {
firstName: ko.observable('Bob'),
lastName: ko.observable('Smith')
};
//监控属性
viewModel.fullName = ko.dependentObservable(function () {
return this.firstName() + "ko的监控属性 " + this.lastName();
}, viewModel);
ko.applyBindings(viewModel);
</script>
例子、验证用户输入代码
<p>Enter a numeric value: <input data-bind="value: attemptedValue"/></p>
<div data-bind="visible: !lastInputWasValid()">That's not a number!</div>
<script>
var viewModel = {
acceptedNumericValue: ko.observable(123),
lastInputWasValid: ko.observable(true)
};
viewModel.attemptedValue = ko.dependentObservable({
read: viewModel.acceptedNumericValue,
write: function (value) {
if (isNaN(value))
this.lastInputWasValid(false);
else {
this.lastInputWasValid(true);
this.acceptedNumericValue(value); // Write to underlying storage
}
},
owner: viewModel
});
ko.applyBindings(viewModel);
4.使用observable数组
var myObservableArray = ko.observableArray(); // Initially an empty array
myObservableArray.push('Some value'); 小结:ko绑定数据时,把数据都先写入在刚开始js中声明的viewmodel中,如果需要修改数据,可以通过链式调用。
ko.js学习一的更多相关文章
- KO.js学习笔记(一)
1.官方网站:knockoutjs.com 2.要dom树加载完毕才能绑定数据 3.ui能实时更新,使用了ko的一个自定义属性:data-bind 4.可以对viewmodel中的属性添加subsci ...
- 【Knockout.js 学习体验之旅】(1)ko初体验
前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...
- 【Knockout.js 学习体验之旅】(3)模板绑定
本文是[Knockout.js 学习体验之旅]系列文章的第3篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...
- 【Knockout.js 学习体验之旅】(2)花式捆绑
本文是[Knockout.js 学习体验之旅]系列文章的第2篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- js学习之变量、作用域和内存问题
js学习之变量.作用域和内存问题 标签(空格分隔): javascript 变量 1.基本类型和引用类型: 基本类型值:Undefined, Null, Boolean, Number, String ...
- js学习篇1--数组
javascript的数组可以包含各种类型的数据. 1. 数组的长度 ,直接用 length 属性; var arr=[1,2,3]; arr.length; js中,直接给数组的length赋值是会 ...
- Vue.js学习笔记(2)vue-router
vue中vue-router的使用:
- NODE.JS学习的常见误区及四大名著
NODE.JS学习的常见误区及四大名著 前段时间由于不满于社区里很多人对于NODE.JS的种种误解而写了一篇文章名为: NODE.JS之我见:http://www.cnblogs.com/pugang ...
随机推荐
- 【Sql Server】SQL SERVER 收缩日志
事务日志记录着在相关数据库上的操作,同时还存储数据库恢复(recovery)的相关信息. 收缩日志的原因有很多种,有些是考虑空间不足,有些则是应用程序限制导致的. 下面介绍的是在简单模式下,进行收缩操 ...
- Jumbo frame与MTU
最近有测试问我Jumbo和MTU分别限制的是什么把我问住了,网上查了一些资料,发现大部分是百科上copy下来的,都没有说到点子上,关键时刻还是同事靠谱,现在根据自己的理解整理一下. 首先了解一下二 ...
- MyBatis使用注意事项
目录 1. 使用何种映射器配置 2. 对象生命周期和作用域 SqlSessionFactoryBuilder SqlSessionFactory SqlSession 映射器实例(Mapper Ins ...
- [物理学与PDEs]第5章第6节 弹性静力学方程组的定解问题
5. 6 弹性静力学方程组的定解问题 5. 6. 1 线性弹性静力学方程组 1. 线性弹性静力学方程组 $$\bee\label{5_6_1_le} -\sum_{j,k,l}a_{ijkl}\cf ...
- [物理学与PDEs]第5章第5节 弹性动力学方程组及其数学结构
5.5.1 线性弹性动力学方程组 1. 线性弹性动力学方程组 $$\beex \bea 0&=\rho_0\cfrac{\p{\bf v}}{\p t}-\Div_x{\bf P}-\r ...
- linux 只查看目录下文件夹
只显示目录文件夹 ls -F |grep "/$" 显示 目录权限 ls -al |grep "^d" 只显示文件 ls -al |grep "^-& ...
- Xvector in Kaldi nnet3
Xvector nnet Training of Xvector nnet Xvector nnet in Kaldi Statistics Extraction Layer in Kaldi ...
- C#利用Vini.cs操作INI文件
VClassLib-CS项目Github地址:https://github.com/velscode/VClassLib-CS VINI文档地址:https://github.com/velscode ...
- [Kubernetes]谈谈Kubernetes的本质
当下k8s算是比较火的一个内容,那么它到底是什么呢,它为什么会这么火呢,它解决的是什么问题呢.这篇文章就尝试着来讲讲,Kubernetes的本质. 当我们谈Kubernetes的时候,总是会想起来Do ...
- 题解-Codeforces1106全套
因为参加完wc后心情很差,而且在广州过年没Ubuntu,所以就没打这场比赛了,结果这套题全部1A了,现在看来真是错失良机 结果这场不计rating 今天是除夕,大家节日快乐 A. Lunar New ...