现在开始学习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. Oracle Sequence与Trigger的使用

    一:建立sequence -- Create sequence create sequence SEQ_PUSH minvalue maxvalue start increment cache ; 二 ...

  2. 错误：指定的任务可执行文件位置 D:\Android\platform-tools\aapt.exe 无效

    android-apt-compiler: Cannot run program "D:\android-sdk\platform-tools\aapt 装上IntelliJ IDEA /下 ...

  3. linux下C和shell调用的popen函数

    说明:      本文介绍popen函数的使用方法和行为机理,并给出实际的例子来辅助说明了popen函数的使用方法. popen函数使用FIFO管道执行外部程序,首先让我们看看popen的函数原型吧: ...

  4. hdu4453-Looploop(伸展树)

    题目有很多图,不好粘贴..... 题意:给出N个数和K1,K2的值,最开始指针指向第一个数,有6种操作 add x : 给前K2个数都增加x reverse : 翻转前K1个数 insert x : ...

  5. poj2739

                                                                                           Sum of Consec ...

  6. Android系统的智能指针（轻量级指针、强指针和弱指针）的实现原理分析

    文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/6786239 Android 系统的运行时库层代 ...

  7. 连数据库是ODBC好还是OLEDB好

    1.连数据库是ODBC好还是OLEDB好?2.是不是只有微软的数据库才可以用OLEDB?3.要切换这两种连接,是不是只需要修改连接字符串?谢谢大家了,小弟对这三个问题不解 分享到:   2009-03 ...

  8. Javascript进阶篇——浏览器对象—JavaScript计时器

    ---恢复内容开始--- JavaScript 计时器在JavaScript中,我们可以在设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行.计时器类型:一次性计时器:仅在指定的延迟时间之后触 ...

  9. javascript运动功能-分享到

    <script> //窗体载入,为div控件绑定事件 window.onload = function () { var div1 = document.getElementById('d ...

  10. iOS 判断设备是否越狱

    我们在开发过程中,需要知道设备是否越狱,在网上查看很多资料,为此封装一些判断的方法. 上代码,不解释: .h文件 #import <Foundation/Foundation.h> @in ...