首页 > 代码库 > 在ASP.NET MVC中使用Knockout实践03,巧用data参数
在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="http://www.mamicode.com/~/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 = http://www.mamicode.com/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="http://www.mamicode.com/~/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 = http://www.mamicode.com/data || {};>this.name = ko.observable();
this.category = ko.observable();
this.categories = categories;
this.origionData = http://www.mamicode.com/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参数
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。