现在开始学习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. 原已经安装好的nginx，现在需要添加一个未被编译安装的模块--echo-nginx-module-0.56

    为了测试一个NGINX变量,将NGINX加了一个编译模板echo-nginx-module-0.56. 参照如下文件 1,先看以前NGINX有哪些东东. sbin/nginx -Vnginx vers ...

  2. 一种基于C51单片机的非抢占式的操作系统架构

    摘 要:从Keil C51的内存空间管理方式入手,着重讨论实时操作系统在任务调度时的重入问题,分析一些解决重入的基本方式与方法:分析实时操作系统任务调度的占先性,提出非占先的任务调度是能更适合于Kei ...

  3. spserver 开源服务器框架研究与分析

    网上开源的C/C++服务器框架 还是比较少的. 最近研究了 spserver , 里面用了较多的设计模式,使用设计模式的目的是把不变的东西和可变的东西分离并且封装起来,避免以后修改代码, 应用设计模式 ...

  4. C#基于UDP实现的P2P语音聊天工具(1)

    这篇文章主要是一个应用,使用udp传送语音和文本等信息.在这个系统中没有服务端和客户端,相互通讯都是直接相互联系的.能够很好的实现效果. 语音获取 要想发送语音信息,首先得获取语音,这里有几种方法,一 ...

  5. 迭代 Iterate

    迭代:指按照某种顺序逐个访问列表中的每一项.比如:for语句 逐个访问: lst = ['q', 'i', 'w', 's', 'i', 'r'] for i in lst: print (i), # ...

  6. OCP-1Z0-051-题目解析-第6题

    6. Examine the structure of the SHIPMENTS table: name                    Null        Type PO_ID      ...

  7. 给定N个整数集合是否存在两个其和刚好为指定常数的元素

    又一次学习一遍<算法导论>,看到了这个问题: 描写叙述一个执行时间为O(nlgn)的算法,使之能在给定一个由n个整数构成的集合S和还有一个整数 X 时,推断出S中是否存在有两个其和刚好等于 ...

  8. LabVIEW新手5大错误

    虽然NI LabVIEW软件长期以来一直帮助工程师和科学家们快速开发功能测量和控制应用,但不是所有的新用户都会遵循LabVIEW编程的最佳方法. LabVIEW图形化编程比较独特,因为只需看一眼用户的 ...

  9. flex 调用WebService1(基于.net)

    以.net平台下C#语言开发的WebService为web服务,使用flex  actionscript语句访问webservice接口 Flex:  Temp.mxml部分代码 //调用WebSer ...

  10. Code Review中应该关注的点

    Magic number/string If statement, you should always use single line or brackets Provide default valu ...