前端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 ...
随机推荐
- 开心学习系列学习笔记-----nodejs缺点
不支持故障恢复 不知你是否在调试的过程中注意,当程序有错误发生时,整个进程就会结束,需要重 新在终端中启动服务器.这一点在开发中无可厚非,但在产品环境下就是严重的问题 了,因为一旦用户访问时触 ...
- Effective Java提升Code Coverage代码涵盖率 - 就是爱Java
虽然我们已经有了测试程序,但是如何得知是否已完整测试了主程序?,透过Code Coverage代码涵盖率,我们可以快速地得知,目前系统中,有多少程序中被测试过,不考虑成本跟投资效益比,涵盖率越高,代表 ...
- JS 浮点计算BUG
最近做项目的时候遇到一个比较纠结的js浮点计算问题. 当时是做利率计算,因为利率大多数涉及到小数点,精度要求也很高. 0.6+0.1+0.1=? 结果出现:0.7999999999999 网上查找了一 ...
- python 安装 ez_setup.py出现的问题及解决办法
试了网上好几个解决办法. 下面这个办法是最对我胃口的. ~~~~~~~~~~~~~~~~ 安装ez_setup.py时出现了这个问题: UnicodeDecodeError: 'ascii' cod ...
- InnoSetup中枚举出INI文件的所有sections和键值
原文 http://blog.chinaunix.net/uid-23480430-id-3016899.html InnoSetup支持一些INI文件操作函数, 例如GetIniString,Ini ...
- GestureDetector和SimpleOnGestureListener的使用教程
1. 当用户触摸屏幕的时候,会产生许多手势,例如down,up,scroll,filing等等,我们知道View类有个View.OnTouchListener内部接口,通过重写他的onTouch(Vi ...
- linux下netstat命令详解
简介 Netstat 命令用于显示各种网络相关信息,如网络连接,路由表,接口状态 (Interface Statistics),masquerade 连接,多播成员 (Multicast Member ...
- spring bean初始化和销毁
spring bean的创建与消亡由spring容器进行管理,除了使用<bean><property/></bean>进行简单的属性配置之外,spring支持更人性 ...
- 【实用技术】DreamWeaver常用快捷键
文件菜单 新建文档 Ctrl+N 打开一个HTML文件 Ctrl+O 或者将文件从[文件管理器]或[站点]窗口拖动到[文档]窗口中 在框架中打开 Ctrl+Shift+O 关闭 Ctrl+W 保存 C ...
- codeforces 166C Median - from lanshui_Yang
C. Median time limit per test 2 seconds memory limit per test 256 megabytes input standard input out ...