在ASP.NET MVC中使用Knockout实践03,巧用data参数
使用Knockout,当通过构造函数创建View Model的时候,构造函数的参数个数很可能是不确定的,于是就有了这样的一个解决方案:向构造函数传递一个object类型的参数data。
<input data-bind="value: name"/><hr/><select data-bind="options: categories, value: category" ></select><hr/>@section scripts{<script src="~/Scripts/knockout-2.2.0.js"></script><script type="text/javascript">$(function() {$.getJSON('@Url.Action("GetFirstProduct","Home")', function (data) {product.name(data.Name);product.category (data.Category);});});var categories = ["小说", "散文", "传记"];var Product = function (data) {data = data || {};this.name = ko.observable();this.category = ko.observable();this.categories = categories;this.initialize(data);};ko.utils.extend(Product.prototype, {initialize: function(data) {this.name(data.name);this.category(data.category);}});var product = new Product({name: "默认值",category: "传记"});//绑定ko.applyBindings(product);</script>}
以上,通过构造函数创建Product的时候,只用到了一个参数,data。在实例化Product的时候,给Product各个成员赋默认值。另外,还为Product的原型添加了一个扩展方法,用于初始化。
当页面加载完毕,向控制器发送异步请求,返回给Product的值不是初始值。
如果想返回到Product初始值的状态,如何做到呢?
可以分3步完成:
1、给Product增加一个属性origionData,用来存放初始状态
2、给Product的原型添加一个扩展方法,用来返回到初始状态,即把origionData属性值作为初始化方法的参数
3、在页面上添加一个按钮,绑定Product的扩展方法
<input data-bind="value: name"/><hr/><select data-bind="options: categories, value: category" ></select><hr/><button data-bind="click:revert">返回初始状态</button>@section scripts{<script src="~/Scripts/knockout-2.2.0.js"></script><script type="text/javascript">$(function() {$.getJSON('@Url.Action("GetFirstProduct","Home")', function (data) {product.name(data.Name);product.category (data.Category);});});var categories = ["小说", "散文", "传记"];var Product = function (data) {data = data || {};this.name = ko.observable();this.category = ko.observable();this.categories = categories;this.origionData = data;this.initialize(data);};ko.utils.extend(Product.prototype, {initialize: function(data) {this.name(data.name);this.category(data.category);},revert: function() {this.initialize(this.origionData);}});var product = new Product({name: "默认值",category: "传记"});//绑定ko.applyBindings(product);</script>}
点击"返回初始状态"按钮,回到Product的初始状态。
总结:使用构造函数创建View Model,当构造函数的参数数量不确定的情况下,可考虑使用data作为参数。
在ASP.NET MVC中使用Knockout实践03,巧用data参数的更多相关文章
- 在ASP.NET MVC中使用Knockout实践01,绑定Json对象
本篇体验在ASP.NET MVC下使用Knockout,将使用EF Code First创建数据库.最后让Knockout绑定一个Json对象. 创建一个领域模型. namespace MvcAppl ...
- 在ASP.NET MVC中使用Knockout实践09,自定义绑定
Knockout真正强大之处在于绑定机制,通过data-bind属性值体现绑定,不仅可以绑定值,还可以绑定事件,甚至可以自定义绑定. 从一个例子看Knockou的绑定机制 假设想给一个button元素 ...
- 在ASP.NET MVC中使用Knockout实践07,自定义验证信息的位置与内容
在前两篇中,体验了Knockout的基本验证和自定义验证.本篇自定义验证信息的显示位置与内容. 自定义验证信息的显示位置 通常,Knockout的验证信息紧跟在input后面,通过validation ...
- 在ASP.NET MVC中使用Knockout实践06,自定义验证、异步验证
在上一篇中体验了Knockout.Validation的基本验证,本篇体验自定义验证和异步验证. 自定义验证规则 ko.validation有一个rules属性,专门用来存放验证规则,它是一个键值对集 ...
- 在ASP.NET MVC中使用Knockout实践08,使用foreach绑定集合
本篇体验使用 foreach 绑定一个Product集合. 首先使用构造创建一个View Model. var Product = function(data) { this.name = ko.ob ...
- 在ASP.NET MVC中使用Knockout实践05,基本验证
本篇体验View Model验证.Knockout的subscribe方法能为View Model成员注册验证规则. @{ ViewBag.Title = "Index"; Lay ...
- 在ASP.NET MVC中使用Knockout实践04,控制View Model的json格式内容
通常,需要把View Model转换成json格式传给服务端.但在很多情况下,View Model既会包含字段,还会包含方法,我们只希望把字段相关的键值对传给服务端. 先把上一篇的Product转换成 ...
- 在ASP.NET MVC中使用Knockout实践02,组合View Model成员、Select绑定、通过构造器创建View Model,扩展View Model方法
本篇体验使用ko.computed(fn)计算.组合View Model成员.Select元素的绑定.使用构造器创建View Model.通过View Model的原型(Prototype)为View ...
- [摘]在ASP.NET MVC中使用DropDownList
在ASP.NET MVC中,尽管我们可以直接在页面中编写HTML控件,并绑定控件的属性,但更方便的办法还是使用HtmlHelper中的辅助方法.在View中,包含一个类型为HtmlHelper的属性H ...
随机推荐
- python psutil监控系统资源【转】
通过 运用 Python 第三方 系统 基础 模块, 可以 轻松 获取 服务 关键 运营 指标 数据,包括 Linux 基本 性能. 块 设备. 网卡 接口. 系统 信息. 网络 地址 库 等 信息. ...
- thymeleaf:字符串拼接+输出单引号
代码: <a href="#" th:onclick="${'removeArticleImg('''+cmsImg.imgID+''')'}">删 ...
- 掩膜 rcnn
更多讨论,参考知乎:https://www.zhihu.com/question/57403701
- Coursera台大机器学习技法课程笔记10-Random forest
随机森林就是要将这我们之前学的两个算法进行结合:bagging能减少variance(通过g们投票),而decision tree的variance很大,资料不同,生成的树也不同. 为了得到不同的g, ...
- 使用GIT管理UE4代码
在OSCHINA的GIT上创建远程项目 cd existing_git_repo git init git add Onepass/ Source/ notes.txt git commit -m & ...
- Codeforces Round #480 (Div. 2) E - The Number Games
题目大意:给你n个点的一棵树, 每个点的权值为2^i ,让你删掉k个点使得剩下的权值和最大. 思路:这题还是比较好想的, 我们反过来考虑, 剩下一个的情况肯定是选第n个点,剩下两个 我们肯定优先考虑第 ...
- 关于 Google 与 Chrome
不断更新... 查看chrome版本 chrome浏览器中输入 chrome://version/ Chrome吧 :http://tieba.baidu.com/f?kw=chrome&i ...
- win10+wget 收藏
win10+wget 收藏 https://blog.csdn.net/qq_31163325/article/details/84344774 1.下载地址:https://eternall ...
- 高能天气——团队Scrum冲刺阶段-Day 6
高能天气--团队Scrum冲刺阶段-Day 6 今日完成任务 于欣月:完善计步器功能:实现了历史步数统计和设置锻炼计划功能,并实现可视化图形界面 余坤澎:将闹钟部分和小游戏部分进行了合并 康皓越:配合 ...
- 探索Java的日志世界
探索Java的日志世界 本文的思维导图 一.主题 打开日志的大门,探索的Java日志世界 二.目标 了解常用的日志框架 掌握日志框架的选择和使用以及开发规范 了解日志框架中的一些设计思想 三.内容 1 ...