time 
设为首页】【收藏本站
当前位置: 主页 > JavaScript > 其它JS框架 > JavaScript实现的MVVM框架Knockoutjs使用入门

JavaScript实现的MVVM框架Knockoutjs使用入门

时间:2012-12-21 23:31 点击:9381次 字体:[ ]




 Knockoutjs是一个JavaScript实现的MVVM框架。主要有如下几个功能:

1. Declarative bindings

2. Observables and dependency tracking

3. Templating

  1. 它对于分离前台的业务逻辑和视图简化数据绑定过程有显著的作用。闲言少叙,直接看例子,如何下载也不说了,如果用VS开发的话用Nuget就可以一键搞定。
  2. 1. 基本绑定和依赖跟踪

首先需要定义一个ViewModel:

  1. <script type="text/javascript"
  2.     function ViewModel() { 
  3.         this.firstName = "Zixin"
  4.         this.lastName = "Yin"
  5.     } 
  6. </script> 

然后是一个用来显示这个ViewModel的View:

  1. <div> 
  2.     <p data-bind="text: firstName"></p> 
  3.     <p data-bind="text: firstName"></p> 
  4.     <input data-bind="value: firstName"/>  
  5.     <input data-bind="value: lastName"/>  
  6. </div> 

从这个view中可以看到声明式绑定的含义,只需要在标签上使用data-bind属性,就可以将数据的值绑定到相应的地方。有了View和ViewModel还需要代码将这两者关联起来:

  1. ko.applyBindings(new ViewModel()); 

将他们放到一起,注意,applyBinding那代码必须在页面全部加载完之后执行。页面显示为:

JavaScript实现的MVVM框架Knockoutjs使用入门_www.fengfly.com

下面再看observables,这个功能不是与生俱来的,必须要把View Model设置为observable,方法如下:

  1. function ViewModel() { 
  2.      this.firstName = ko.observable("Zixin"); 
  3.      this.lastName = ko.observable("Yin"); 
  4.  } 

其他都不需要改变,这时候,如果改变输入框中的值,当焦点离开的时候,可以发现p中的值也跟着改变了:

JavaScript实现的MVVM框架Knockoutjs使用入门_www.fengfly.com

下面再看dependency tracking,也就是如果一个值依赖多各值,其中任何一个值发生变化,它都会自动发生变化. 这是通过computed方法实现的,代码如下:

  1. function ViewModel() { 
  2.      this.firstName = ko.observable("Zixin"); 
  3.      this.lastName = ko.observable("Yin"); 
  4.      this.fullName = ko.computed(function () { return this.lastName() + " " + this.firstName(); },this); 
  5.  }  



本文地址 : http://www.fengfly.com/plus/view-211007-1.html
标签: JavaScript 框架 MVVM 使用入门 Knockoutjs
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: