前端MVVM学习之KnockOut(二)
现在开始学习Knockout并且做个简单的例子。
Knockout是建立在以下三个核心功能之上的：
1、Observables and dependency tracking(属性监控与依赖跟踪)
2、Declarative bindings(声明式绑定)
3、Templating(模板机制)
创建一个ViewModel
var myViewModel = {
personName: ko.observable('张三'),
personAge: ko.observable()
};
将属性绑定到View
<div>
<span data-bind="text: personName"></span>
</div>
将ViewModel一般应用到View中
$(function() {
ko.applyBindings(myViewModel);
});
最后源码如下:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Knockout学习一</title>
<script src="Scripts/knockout-3.0.0.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
</head>
<body> <div>
<span data-bind="text: personName"></span>
</div> </body>
<script type="text/javascript">
var myViewModel = {
personName: ko.observable('张三'),
personAge: ko.observable()
}; $(function() {
ko.applyBindings(myViewModel);
}); </script>
</html>
前端将会显示出张三，其中我们为属性设定了Observables属性，即属性监控，这样personName数据若有变化，则会自动更新到View中，实现了数据的双向绑定。
applyBindings也可以有两个参数:ko.applyBindings(myViewModel, document.getElementById('someElementId')) 后一个参数是可选的，表示一个标签的id,若设置了该参数，则表示myViewModel只作用于该标签内的View,通过该参数，可以使一个页面对应多个ViewModel。
简单的knockout例子就到这里。
前端MVVM学习之KnockOut(二)的更多相关文章
- 前端MVVM学习之KnockOut(一)
MVVM理解 MVVM即Model-View-viewModel,是微软WPF和MVP(Model-View-Presenter)结合发展演变过来的一种新型架构框架. MVVM设计模式有以下优点: ( ...
- 前端MVVM框架：Knockout.JS（一）
前言 在我们平时开发 Web 应用程序的时候,如果项目不算特别大的话,一般都是拿 jQuery 再配合一些前端 UI 框架就在项目上面应用了.如果页面逻辑稍微复杂的话,那个在写前端 JavaScrip ...
- 前端MVC学习总结（二）——AngularJS验证、过滤器、指令
一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...
- 前端MVC学习笔记（二）——AngularJS验证、过滤器、指令
一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...
- Web前端开发学习笔记（二）
Homework2:http://my.ss.sysu.edu.cn/wiki/display/WEB/Homework+2+-+Movie+Review 这份作业跟布局相关,因此很多都是布局的知识: ...
- js架构设计模式——前端MVVM框架设计及实现（二）
前端MVVM框架设计及实现(二) 在前端MVVM框架设计及实现(一)中有一个博友提出一个看法: “html中使用mvvm徒增开发成本” 我想这位朋友要表达的意思应该是HTML定义了大量的语法标记,HT ...
- 前端MVVM框架设计及实现（二）
在前端MVVM框架设计及实现(一)中有一个博友提出一个看法: “html中使用mvvm徒增开发成本” 我想这位朋友要表达的意思应该是HTML定义了大量的语法标记,HTML中放入了太多的逻辑,从而增加了 ...
- Yii框架学习笔记（二）将html前端模板整合到框架中
选择Yii 2.0版本框架的7个理由 http://blog.chedushi.com/archives/8988 刚接触Yii谈一下对Yii框架的看法和感受 http://bbs.csdn.net/ ...
- 2.VUE前端框架学习记录二
VUE前端框架学习记录二:Vue核心基础2(完结)文字信息没办法描述清楚,主要看编码实战里面,有附带有一个完整可用的Html页面,有需要的同学到脑图里面自取.脑图地址http://naotu.baid ...
随机推荐
- 记事本创建servlet在tomcat中发布基本思路
在webapps中新建文件夹H,在其中再创建WEB-INF文件夹,在创建classes文件夹和web.xml文件,web.xml需要配置一下,classes文件夹中存放Servlet经编译过的clas ...
- 2015北大夏令营day1 B:An Idea of Mr. A
题意:给定一个范围l,r计算i,j(i<j)属于这个范围内的gcd(2^(2^i)+1,2^(2^j)+1)的总和. 思路:费马数的应用,让我惊呆的是当年居然有123个人会做,我tm毛都不会.. ...
- Thinkpad E430+CentOS 6.4+ linux-3.10.12内核网卡驱动（无线+有线）配置
配置并编译安装内核模块和内核后,解压附件 firmware.tar.bz2,拷贝其中的rtlwifi文件夹到/lib/firmware下,然后 执行装载内核模块命令: sudo modprobe rt ...
- 【HDU2122】Ice_cream’s world III（MST基础题）
2坑,3次WA. 1.判断重边取小.2.自边舍去. (个人因为vis数组忘记初始化,WA了3次,晕死!!) #include <iostream> #include <cstring ...
- proxy 利用get拦截，实现一个生成各种DOM节点的通用函数dom。
const dom = new Proxy({}, { get(target, property) { return function(attrs = {}, ...children) { const ...
- android开发步步为营之65:解决ScrollView和ListView触摸事件onInterceptTouchEvent相互冲突问题
近期项目里面有个需求,一个页面放了一个ScrollView,整个页面能够向上滚动,然后ScrollView里面又嵌套了一个ListView,ListView里面的数据也是能够上下滑动的,理论上List ...
- Unable to run mksdcard SDK tool.
Ubuntu 14.04,安装android studio后运行出错,sdk manager不能正常运行 Unable to run mksdcard SDK tool. 原因,缺少运行需要的库:li ...
- 同一DataTable下创建多个结构数据相同的DataView的小问题
昨天在根据经理的要求修改公司后台的时候,遇到了一个很奇怪的问题 DataView dvFocus = ]); DataView dvLook = ]); DataView dvNewUser = ]) ...
- animation与transition
animation 动画,无法直接决定开始时间 demo1 @-webkit-keyframes demo-animation1{ 0% { -webkit-transform:translate3d ...
- ASP.NET实现IE下禁用浏览器后退按钮办法
在page_load方法里面增加如下代码: Response.Buffer = true; Response.ExpiresAbsolute = DateTime.Parse("2010-1 ...