{{angular.js 使用技巧}} - 实现计算列属性
2013-11-06 22:13
363 查看
前端MV*框架现在有很多,其中某些框架有计算列(又叫监控属性),比如:微软推荐的 Knockout.js 和博客园司徒正美的 avalon.js 框架。
本人只使用过 Knockout.js,avalon.js 没有时间研究,据作者介绍是款集合所有MV*框架优点而打造的一款轻量级MVVM框架。
Avalon.js 实现计算列示例:
之前就有看过 avalon.js 关于计算列属性的一个示例, http://rubylouvre.github.io/mvvm/
输入First Name 或者 Last Name,Full Name时时变化,当你输入Full Name的时候,时时监控并更新 First Name和 Last Name。
avalon的代码如下:
看起来avalon框架还不错,实现计算列的功能代码量比较少。上面这个例子主要的难点应该是输入Full Name时怎样让First Name和Last Name时时变化,虽然这种需求不是特别多,但是可以作为例子讲解。
Angular.js 实现方式:
Angular.js 是没有计算列属性之说的,但是怎样能够实现上述示例的功能呢?
主要思路:监控 First name 和 Last name 当有变化时更新Full name,同时Full name 改变的时候要根据空格切割 Full name更新First name 和Last name,废话不多说,直接上代码示例:
avalon的计算列展现形式更标准化一点,通过 get set来实现对Full Name的监控和设置,Angular.js 却是通过$watch 监控属性(或者函数)达到同样的效果,这也许就是Angular.js作者觉得没有必要加入计算列属性的原因吧(纯属个人猜测)。
本篇文章只是通过 比较的方式来展示下 Angular.js 监控属性的功能!希望能够发散使用Angular的小伙伴的思维方式。
扩散知识:
1. 上述示例是通过监控($watch)函数来达到想要的效果,其实$watch还可以监控数组,如:
关于$watch的详细介绍参考 官方文档:http://docs.angularjs.org/api/ng.$rootScope.Scope , 英文不好的请看:http://www.angularjs.cn/A0a6
2. 最后分享一个用Knockout.js 做的示例,达到同样的效果,和 avalon.js 使用方式差不多,司徒正美应该也是参考了Knockout的吧,注:只要光标失去焦点才能触发更新
作者:why520crazy
新浪微博: @why520crazy
出处:http://why520crazy.cnblogs.com
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
本人只使用过 Knockout.js,avalon.js 没有时间研究,据作者介绍是款集合所有MV*框架优点而打造的一款轻量级MVVM框架。
Avalon.js 实现计算列示例:
之前就有看过 avalon.js 关于计算列属性的一个示例, http://rubylouvre.github.io/mvvm/
输入First Name 或者 Last Name,Full Name时时变化,当你输入Full Name的时候,时时监控并更新 First Name和 Last Name。
avalon的代码如下:
<fieldset ms-controller="simple"> <legend>例子</legend> <p>First name: <input ms-duplex="firstName" /></p> <p>Last name: <input ms-duplex="lastName" /></p> <p>Hello, <input ms-duplex="fullName"></p> <div>{{firstName +" | "+ lastName }}</div> <p>nick name: <input ms-duplex="nick.name" /></p> <p>{{nick.name}}</p> </fieldset> avalon.define("simple", function(vm) { vm.firstName = "司徒" vm.lastName = "正美" vm.fullName = {//一个包含set或get的对象会被当成PropertyDescriptor, set: function(val) {//set, get里面的this不能改成vm var array = (val || "").split(" "); this.firstName = array[0] || ""; this.lastName = array[1] || ""; }, get: function() { return this.firstName + " " + this.lastName; } }, vm.nick = { name: "暗黑之民" } });
看起来avalon框架还不错,实现计算列的功能代码量比较少。上面这个例子主要的难点应该是输入Full Name时怎样让First Name和Last Name时时变化,虽然这种需求不是特别多,但是可以作为例子讲解。
Angular.js 实现方式:
Angular.js 是没有计算列属性之说的,但是怎样能够实现上述示例的功能呢?
主要思路:监控 First name 和 Last name 当有变化时更新Full name,同时Full name 改变的时候要根据空格切割 Full name更新First name 和Last name,废话不多说,直接上代码示例:
avalon的计算列展现形式更标准化一点,通过 get set来实现对Full Name的监控和设置,Angular.js 却是通过$watch 监控属性(或者函数)达到同样的效果,这也许就是Angular.js作者觉得没有必要加入计算列属性的原因吧(纯属个人猜测)。
本篇文章只是通过 比较的方式来展示下 Angular.js 监控属性的功能!希望能够发散使用Angular的小伙伴的思维方式。
扩散知识:
1. 上述示例是通过监控($watch)函数来达到想要的效果,其实$watch还可以监控数组,如:
$scope.$watch("[firstName,lastName]",function(newValue){ $scope.fullName = (newValue[0] || "") + " " + (newValue[1] || "") },true);
关于$watch的详细介绍参考 官方文档:http://docs.angularjs.org/api/ng.$rootScope.Scope , 英文不好的请看:http://www.angularjs.cn/A0a6
2. 最后分享一个用Knockout.js 做的示例,达到同样的效果,和 avalon.js 使用方式差不多,司徒正美应该也是参考了Knockout的吧,注:只要光标失去焦点才能触发更新
作者:why520crazy
新浪微博: @why520crazy
出处:http://why520crazy.cnblogs.com
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
相关文章推荐
- 使用SpringMVC+Angularjs实现登录功能
- JS中使用"data-"开头的属性及data()方法实现自定义属性
- 使用 AngularJS & NodeJS 实现基于 token 的认证
- Angular.Js中ng-include指令的使用与实现
- JS在GridView中实现CheckBox全选和非全选 及Gridview批量删除使用技巧
- 使用 AngularJS & NodeJS 实现基于 token 的认证应用
- vue.js使用之计算属性与方法返回的差别
- 使用NodeJS+AngularJS+MongoDB实现一个Web数据扒取-分析-展示的系统
- 分享两个实用的ASP.NET开发技巧——使用WebMethod实现ajax和控件的ClientIDMode属性
- android 开发技巧(1)--使用 weight 属性实现视图的居中显示
- vue.js计算属性用法(computed)技巧,依赖其他vue实例的数据
- 项目开发中的一些注意事项以及技巧总结 基于Repository模式设计项目架构—你可以参考的项目架构设计 Asp.Net Core中使用RSA加密 EF Core中的多对多映射如何实现? asp.net core下的如何给网站做安全设置 获取服务端https证书 Js异常捕获
- JS中使用"data-"开头的属性及data()方法实现自定义属性
- 关于android中使用weight属性实现多个layou比例布局的计算方法
- 使用js实现两点之间距离计算功能
- 使用 AngularJS & NodeJS 实现基于token 的认证应用(转)
- 使用Angular.js实现简单的购物车功能
- Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
- {{angular.js 使用技巧}} - 基于验证框架的扩展(w5cValidator)
- 使用 AngularJS & NodeJS 实现基于 token 的认证应用