上一主题下一主题
«12345»Pages: 1/10     Go
关键字
主题 : 微软MVC框架功力深厚:Web开发化繁为简 - Knockout.js框架与MVVM模式
级别: VIP四级

UID: 230365
精华: 12
发帖: 314
威望: 3432 点
学点: 380 点
贡献: 2 点
好评: 1 点
学币: 0 个
注册时间: 2010-04-16
最后登录: 2014-09-25
楼主  发表于: 2014-05-19 11:22||

1 微软MVC框架功力深厚:Web开发化繁为简 - Knockout.js框架与MVVM模式

管理提醒: 本帖被 beifengfwy 执行加亮操作(2014-06-16)
基于ASP.NET MVC 4 +Knockout.JS+Web API+FluentData+EasyUI 技术实现Web通用商业****发框架(学习版):点此了解详情
% jDH{xSMb  
JCH9~n.  
.NET Web****发零基础到商业项目实战北风特训营(赠送价值近百万商业源码):点此了解详情
nscnG5'{+  
S6bW r0XR  
微软MVC框架功力深厚:Web****发化繁为简 <ppdy,j:  
A}"|_ &E  
- Knockout.js框架与MVVM模式 v:lkvMq|=  
V;^-EWNj  
前言 qFVZhBC  
} :?*n:g5  
Knockout神马是MVVM?初探knockout水深结语 y/@Bh zc  
Mn5(Kw?o2J  
前言: 1G A.c:  
     初次尝试使用VS2012创建ASP.NET MV****项目时,无意间发现微软的Script文件夹中增加了knockout-2.1.0.debug.js与knockout-2.1.0.js两个JS文件。第一次对这个名子有一个简单的印象。另一次机会,接触到一个商业源码,代码是C#的,使用的后台技术是ASP.NET MV****,前端用的是EasyUI与Knockout.js,代码简洁、优雅,界面华丽,用户体验良好,功能强大。深入研究之后,我发现在自己深深的爱上这个神奇的客户端JS框架。经过尽一个月的深入研究,我基本全面深入了解了这套客户端框架,也准备录制相关视频教程把这个强大的框架与大家分享。接下来,我简单的给大家介绍一下这个框架。 ]prw=rD  
~LI}   
Knockout L@RnLaoQ  
      Knockout (或者Knockout.js ,KnockoutJS)是一个****源的J****aScript库,网址为 www.knockoutjs.com 。Knockout语法简洁、可读性好,能轻松实现与DOM元素的关联。一旦数据模型的状态发生改变,则立即自动刷新UI。Knockout采用Model-View-View-Model (MVVM)的设计模式来简化动态J****aScript UI。Knockout有效实现了J****aScript与UI HTML呈现的分离。有了Knockout,在写J****aScript时,就不需要在页面中引用UI元素或DOM。 AK lr a$  
  Knockout设计目标是把任何J****aScript对象当成View Model来使用。只要View Model的属性具有可监听性,就可以使用Knockout将其与UI绑定。一旦属性值发生变化时,UI会被自动刷新。 |Ja 5O  
pPxgjX  
神马是MVVM 0aq{Y7sYU  
foPM5+.G  
借用我们百科一张美图,所谓MVVM就是model-view-viewmodel模型。 W +Piqf*  
他是微软带来的一项新的技术体验,最先用于WPF,最后发现其模式对前端****发尤其比较合适,所以便在前端流行起来了。 <IU    
MVVM是对MVC的一个****,用以适应当代Web****发。 #Br`;hL<T  
model为数据或者业务逻辑,完全与UI无关,它存储了状态并对问题领域****出****,model可以写在代码里面或者用json表示、或者数据表中,反正他就是数据啦。 =f@71D1  
view表示可见元素,按钮、标签、图片等,我们可能会对各个标签绑定事件,但是我们知道这其实是原来controller该****的事情。 ZYY`f/qi  
简单例子中view被直接绑定到model,model的一些部分只是简单单向绑定显示在view中。 Sc3{Y+g  
ZC$u8$+P  
初探knockout水深 W rT_7  
讲了这么多理论,朋友们未必能理解到Knockout框架的强大之处,下面就通过几个具体的实例让大家快速上手。 Mg0a i6KD  
复制代码
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3.     <title></title>
  4.     <script src="js/jquery-1.7.1.js" type="text/j****ascript"></script>
  5.     <script src="js/knockout-2.2.0.js" type="text/j****ascript"></script>
  6.     <script type="text/j****ascript">
  7.         var piliPerson = [
  8.                 { name: '叶小钗', desc: '刀狂剑痴', weapon: '刀剑' },
  9.                 { name: '素还真', desc: '清香白莲', weapon: '剑' },
  10.                 { name: '一页书', desc: '百世经纶', weapon: '掌' }
  11.             ];
  12.         $(document).ready(function () {
  13.             var viewModel = {};
  14.             ko.applyBindings(viewModel);
  15.         });
  16.     </script>
  17. </head>
  18. <body>
  19.     <select data-bind="options: piliPerson, optionsText: 'name'">
  20.     </select>
  21. </body>
  22. </html>
@WXRZEz  
效果: X'.l h#&  
我们再拓宽: 0(C[][a*u  
复制代码
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3.     <title></title>
  4.     <script src="js/jquery-1.7.1.js" type="text/j****ascript"></script>
  5.     <script src="js/knockout-2.2.0.js" type="text/j****ascript"></script>
  6.     <script type="text/j****ascript">
  7.         var piliPerson = [
  8.                 { name: '叶小钗', desc: '刀狂剑痴', weapon: '刀剑', key: 'yxc' },
  9.                 { name: '素还真', desc: '清香白莲', weapon: '剑', key: 'shz' },
  10.                 { name: '一页书', desc: '百世经纶', weapon: '掌', key: 'yys' }
  11.             ];
  12.         $(document).ready(function () {
  13.             var viewModel = {
  14.                 //observable是一个KO的基础概念,UI可健康(observe)他的值,并且回应他的变化
  15.                 //这里相当于设置了其选择项,当前选择的素还真
  16.                 choseObj: ko.observable(piliPerson[1])
  17.             };
  18.             ko.applyBindings(viewModel);
  19.         });
  20.     </script>
  21. </head>
  22. <body>
  23.     <select data-bind="options: piliPerson, optionsText: 'name', value: choseObj">
  24.     <option ></option>
  25.     </select>
  26.     选择了:<span data-bind="text: choseObj().name"></span>
  27. </body>
  28. </html>
BGNZE{K4"  
效果: Dd OK&  
比较神奇的是,我们可以在标签里面使用函数了,和最初的.net越来越靠近了: p]e.E`'S  
复制代码
  1. function formatStr(name) {
  2.     return name ? '霹雳人物:' + name : '';
  3. }
g}?39?o 4  
效果: $v8T%'p+  
以上算是一个初体验,下面我们再来给大家举一个更深入一点的示例: ]Gj%-5G  
接下来的这个示例主要****赜贙O里结合运用列表(List)和集合(Collection)。第一步:首先通过HTML建立一个table。 }WR@%)7ay  
复制代码
  1. <h2>****清单</h2>
  2. <h3 data-bind="visible: totalSurcharge() > 0">
  3.     总价: [    wind_phpcode_4    ]lt;span data-bind="text: totalSurcharge().toFixed(2)"></span>
  4. </h3>
  5. <button data-bind="click: addSeat">添加</button>
  6. <table>
  7. <thead>
  8.     <tr>
  9.         <th>客户名称</th><th>餐单</th><th>价格</th><th></th>
  10.     </tr>
  11. </thead>
  12. <tbody data-bind="foreach: seats">
  13.     <tr>
  14.         <td><input data-bind="value: name" /></td>
  15.         <td>
  16.             <select data-bind="options: $root.****ailableMeals, value: meal, optionsText: 'mealName'"></select>
  17.         </td>
  18.         <td data-bind="text: formattedPrice"></td>
  19.         <td><a href="#" data-bind="click: $root.removeSeat">****</a></td>
  20.     </tr>    
  21. </tbody>
  22. </table>
*Qngx  
这里的HTML标签中通过data-bind绑定了很多Ko的事件。因为太懒,直接把最终的HTML贴出来了,JS还是一步一步来吧。这里先不解释,在接下来的步骤中再一一揭晓。 0m4#{^Y  
ee<'j~{A  
第二步:JS代码 cri-u E?  
复制代码
  1. // Class to represent a row in the seat reservations grid
  2. function SeatReservation(name, initialMeal) {
  3.     var self = this;
  4.     self.name = name;
  5.     self.meal = ko.observable(initialMeal);
  6. }
  7. // Overall viewmodel for this screen, along with initial state
  8. function ReservationsViewModel() {
  9.     var self = this;
  10.     // Non-editable catalog data - would come from the server
  11.     self.****ailableMeals = [
  12.         { mealName: "Standard (sandwich)", price: 0 },
  13.         { mealName: "Premium (lobster)", price: 34.95 },
  14.         { mealName: "Ultimate (whole zebra)", price: 290 }
  15.     ];    
  16.     // Editable data
  17.     self.seats = ko.observableArray([
  18.         new SeatReservation("G7", self.****ailableMeals[0]),
  19.         new SeatReservation("Zhipeng", self.****ailableMeals[2])
  20.     ]);
  21. }
  22. ko.applyBindings(new ReservationsViewModel());
! ~mPxGY  
这段代码中,SeatReservation作为一个构造函数,用于存储简单的餐单信息,如价格,商户。ko.observable(initialMeal)这里是Knockoutjs的动态绑定数据方法,能双向沟通数据。详见Ko的文档。ReservationsViewModel作为一个ViewMode,包含了一个****ailableMeals数组,一个名为seats的属性,使用了ko.observableArray先初始化了两个值,并能在数组项添加****的时候自动更新UI。然后回到html结构中,看到tbody中的foreach:seats和td中的data-bind应该懂了吧。现在的js代码只是实现了数据的静态展示,现在要加上一个addSeats方法往表格添加和****行,并且能通过下拉框更改餐单。 I]#x0?D  
复制代码
  1. function ReservationsViewModel() {
  2.     // ... le****e all the rest unchanged ...
  3.     // Operations
  4.     self.addSeat = function() {
  5.         self.seats.push(new SeatReservation("G7Note", self.****ailableMeals[2]));
  6.     }
  7.     self.removeSeat = function(seat) {
  8.         self.seats.remove(seat)
  9.     }
  10. }
pm}_\_  
bHDZ=Ik  
很简单,就这样便可以实现添加功能,及****功能。结合以上HTML代码中data-bind="click: $root.removeSeat"也不难理解。最后的功能便是添加总额显示,以及当总额小于零时不显示。 9)F$){G]vs  
复制代码
  1. function ReservationsViewModel() {
  2.     // ... le****e all the rest unchanged ...
  3.     self.totalSurcharge = ko.computed(function() {
  4.        var total = 0;
  5.        for (var i = 0; i < self.seats().length; i++)
  6.            total += self.seats()[i].meal().price;
  7.        return total;
  8.     });
  9. }
wLq#,X>%B  
[MAvU ?;  
这里使用了ko.computed当下拉框选择项改变时,动态更新总价UI。大概的思路到此边结束了。所用到的Ko的API也 是很简单易懂,但确能轻松地操作UI层的DOM,也能方便地更新ViewModel层的DATA。相比起Backbone.js的重型杀伤武器,Ko在这 里扮演的角色更像瑞士****,小巧却犀利 -t*P=V|@  
M VE:JNm  
结论 4SkCV  
 L$]Y$yv  
经过今天的学习,虽然大家没能完全了解MVVM是什么,但是也有所增长,更是发现了ko这个神器,相信一定和我一样,让你眼前一亮。 JWQd6JQ_~V  
接下来,把自己最近一段时间的研究成果与及准备录制的视频课程课件在这里向大家展示一下: j3o?B  
课程思维导图: rB =c  
[attachment=6973] EP{ji"/7[  
[attachment=6974] ) Cm95,Y  
[attachment=6975]   7Zh#7jiZ`  
RHI?_gf&  
另把最近已经录制好的内容和大家分享下: O2~Q(q'   
[attachment=6976] q] '2'"k  
|x ir93|  
具体见网盘下载地址! [TmZ\t!5$  
具体的课程预计讲数在:20+,预计课程录制结束时间在2014年6月份,有需要了解课程详情的可****官网客服。 iT~ gt/K  
因为时间有限,对KO的研究不久,讲解有不到位之处,欢迎大家抛砖。 zrA =?[  
5BMrn0  
网盘下载地址: za5E{<0  
链接: http://pan.baidu.com/s/18IX0i 70A* !v  
密码:
本部分内容设定了隐藏,需要回复后才能看到
E7U.>8C  
[58qC:  
基于ASP.NET MVC 4 +Knockout.JS+Web API+FluentData+EasyUI 技术实现Web通用商业****发框架(学习版):点此了解详情
s&W^?eKr  
;+~Phdy  
.NET Web****发零基础到商业项目实战北风特训营(赠送价值近百万商业源码):点此了解详情
级别: VIP五级

UID: 209947
精华: 0
发帖: 60
威望: 492 点
学点: 46 点
贡献: 0 点
好评: 0 点
学币: 0 个
注册时间: 2009-12-29
最后登录: 2014-11-17
沙发(1楼)  发表于: 2014-05-23 18:51||

好啊给哈哈哈哈
级别: 北风爱好者

UID: 466236
精华: 0
发帖: 2
威望: 2 点
学点: 4 点
贡献: 0 点
好评: 0 点
学币: 0 个
注册时间: 2014-05-24
最后登录: 2016-11-21
板凳(2楼)  发表于: 2014-05-24 18:48||

好啊  感谢lz辛苦分享
级别: VIP五级

UID: 463187
精华: 0
发帖: 13
威望: 24 点
学点: 29 点
贡献: 0 点
好评: 0 点
学币: 0 个
注册时间: 2014-04-28
最后登录: 2015-06-19
地板(3楼)  发表于: 2014-05-27 23:13||

Re:微软MVC框架功力深厚:Web****发化繁为简 - Knockout.js框架与MVVM模式
级别: VIP五级

UID: 465240
精华: 0
发帖: 36
威望: 36 点
学点: 28 点
贡献: 0 点
好评: 0 点
学币: 0 个
注册时间: 2014-05-16
最后登录: 2015-02-03
地下室(4楼)  发表于: 2014-05-28 08:59||

好的,
我的青春我做主
级别: 终身会员

UID: 162806
精华: 0
发帖: 231
威望: 2355 点
学点: 2 点
贡献: 0 点
好评: 0 点
学币: 0 个
注册时间: 2009-05-22
最后登录: 2016-01-03
下水道(5楼)  发表于: 2014-05-30 18:08||

风老师太给力了!
级别: 北风爱好者

UID: 467235
精华: 0
发帖: 4
威望: 4 点
学点: 6 点
贡献: 0 点
好评: 0 点
学币: 0 个
注册时间: 2014-05-31
最后登录: 2014-08-09
6楼  发表于: 2014-06-06 10:12||

学习学习.
级别: VIP五级

UID: 270178
精华: 0
发帖: 18
威望: 414 点
学点: 453 点
贡献: 45 点
好评: 0 点
学币: 8 个
注册时间: 2010-11-11
最后登录: 2016-11-15
7楼  发表于: 2014-06-10 17:12||

风老师,Knockoutjs的课程大概在什么时候能出呢
级别: VIP四级

UID: 230365
精华: 12
发帖: 314
威望: 3432 点
学点: 380 点
贡献: 2 点
好评: 1 点
学币: 0 个
注册时间: 2010-04-16
最后登录: 2014-09-25
8楼  发表于: 2014-06-12 21:38||

回 7楼(luoq123love) 的帖子

已经录完了,七月份会随着一套商业课程上线预****,请关注我****偻
级别: 北风爱好者

UID: 460161
精华: 0
发帖: 12
威望: 11 点
学点: 38 点
贡献: 1 点
好评: 0 点
学币: 0 个
注册时间: 2014-04-05
最后登录: 2014-06-24
9楼  发表于: 2014-06-14 17:11||

学习一下,谢谢
上一主题下一主题
«12345»Pages: 1/10     Go