现在开始学习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(二)的更多相关文章

  1. 前端MVVM学习之KnockOut(一)

    MVVM理解 MVVM即Model-View-viewModel,是微软WPF和MVP(Model-View-Presenter)结合发展演变过来的一种新型架构框架. MVVM设计模式有以下优点: ( ...

  2. 前端MVVM框架：Knockout.JS（一）

    前言 在我们平时开发 Web 应用程序的时候,如果项目不算特别大的话,一般都是拿 jQuery 再配合一些前端 UI 框架就在项目上面应用了.如果页面逻辑稍微复杂的话,那个在写前端 JavaScrip ...

  3. 前端MVC学习总结（二）——AngularJS验证、过滤器、指令

    一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...

  4. 前端MVC学习笔记（二）——AngularJS验证、过滤器、指令

    一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...

  5. Web前端开发学习笔记（二）

    Homework2:http://my.ss.sysu.edu.cn/wiki/display/WEB/Homework+2+-+Movie+Review 这份作业跟布局相关,因此很多都是布局的知识: ...

  6. js架构设计模式——前端MVVM框架设计及实现（二）

    前端MVVM框架设计及实现(二) 在前端MVVM框架设计及实现(一)中有一个博友提出一个看法: “html中使用mvvm徒增开发成本” 我想这位朋友要表达的意思应该是HTML定义了大量的语法标记,HT ...

  7. 前端MVVM框架设计及实现（二）

    在前端MVVM框架设计及实现(一)中有一个博友提出一个看法: “html中使用mvvm徒增开发成本” 我想这位朋友要表达的意思应该是HTML定义了大量的语法标记,HTML中放入了太多的逻辑,从而增加了 ...

  8. Yii框架学习笔记（二）将html前端模板整合到框架中

    选择Yii 2.0版本框架的7个理由 http://blog.chedushi.com/archives/8988 刚接触Yii谈一下对Yii框架的看法和感受 http://bbs.csdn.net/ ...

  9. 2.VUE前端框架学习记录二

    VUE前端框架学习记录二:Vue核心基础2(完结)文字信息没办法描述清楚,主要看编码实战里面,有附带有一个完整可用的Html页面,有需要的同学到脑图里面自取.脑图地址http://naotu.baid ...

随机推荐

  1. 让libvirt支持win7运行2核以上

    现在人在部署OpenStack之后会发现按照配额运行Linux的虚拟机没有问题,但是运行windows的虚拟机会发现如果配置2个以上的核则无法识别,windows server也最多支持到4个核.无法 ...

  2. 省去在线安装 直接下载Chrome官方离线安装包

    首页>软件之家>便捷上网 省去在线安装 直接下载Chrome官方离线安装包 2013-10-12 23:22:02来源:IT之家 原创作者:阿象责编:阿象人气:54487 评论:19 谷歌 ...

  3. 《Programming WPF》翻译 第8章 6.我们进行到哪里了？

    原文:<Programming WPF>翻译 第8章 6.我们进行到哪里了? 动画可以增强应用程序的交互感.它有利于更平滑的转换--当条目出现或消失的时候.它应该,当然,被用于体验和重新着 ...

  4. 利用autoit自动关闭指定标题窗口

     最近使用PL/SQL Developer 比较两个数据库数据差异,因部分表上没有主键,PL/SQL 就会弹出一个确认框提示某某表没有主键.因为有很多表没有主键,就不停的弹出确认窗口,得不停的点击 ...

  5. IT人员应该怎么跳槽

    中国的程序员只有两个状态,刚跳槽和准备跳槽.   中国IT行业的快速发展对IT从业人员的需求不断扩大,记得08年刚毕业的时候,在帝都找一个3k的工作都让我特别满足,现在仅能写出”hello world ...

  6. nyoj 104 最大和 （二维最大字串和）

    描述 给定一个由整数组成二维矩阵(r*c),现在需要找出它的一个子矩阵,使得这个子矩阵内的所有元素之和最大,并把这个子矩阵称为最大子矩阵. 例子: - - - - - - - 其最大子矩阵为: - - ...

  7. KafkaOffsetMonitor监控

    介绍 KafkaOffsetMonitor是有由Kafka开源社区提供的一款Web管理界面,这个应用程序用来实时监控Kafka服务的Consumer以及它们所在的Partition中的Offset,你 ...

  8. 写PPT的方法

    这个方法是今天同事的方法,看到他的PPT简洁高效,明了,记下了他的方法: 写文字:写框架,这个框架或者内容可以是word形式的,目的是展示内容 找模板:在搜集到的各种ppt模板中选几个适合自己文字的页 ...

  9. samba服务器加入域控主机所需要修改的配置文件

    samba服务器加入域控主机,成为域成员,当用户访问samba服务器上的共享文件时,直接到域控主机上进行认证.samba服务器上不需要像先前一样创建系统用户,创建samba用户及密码. 1.安装环境( ...

  10. java 中打印调用栈

    source-code: public class A { public A() {} private static void printStackTrace() {         StackTra ...