使用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参数的更多相关文章

  1. 在ASP.NET MVC中使用Knockout实践01,绑定Json对象

    本篇体验在ASP.NET MVC下使用Knockout,将使用EF Code First创建数据库.最后让Knockout绑定一个Json对象. 创建一个领域模型. namespace MvcAppl ...

  2. 在ASP.NET MVC中使用Knockout实践09,自定义绑定

    Knockout真正强大之处在于绑定机制,通过data-bind属性值体现绑定,不仅可以绑定值,还可以绑定事件,甚至可以自定义绑定. 从一个例子看Knockou的绑定机制 假设想给一个button元素 ...

  3. 在ASP.NET MVC中使用Knockout实践07,自定义验证信息的位置与内容

    在前两篇中,体验了Knockout的基本验证和自定义验证.本篇自定义验证信息的显示位置与内容. 自定义验证信息的显示位置 通常,Knockout的验证信息紧跟在input后面,通过validation ...

  4. 在ASP.NET MVC中使用Knockout实践06,自定义验证、异步验证

    在上一篇中体验了Knockout.Validation的基本验证,本篇体验自定义验证和异步验证. 自定义验证规则 ko.validation有一个rules属性,专门用来存放验证规则,它是一个键值对集 ...

  5. 在ASP.NET MVC中使用Knockout实践08,使用foreach绑定集合

    本篇体验使用 foreach 绑定一个Product集合. 首先使用构造创建一个View Model. var Product = function(data) { this.name = ko.ob ...

  6. 在ASP.NET MVC中使用Knockout实践05,基本验证

    本篇体验View Model验证.Knockout的subscribe方法能为View Model成员注册验证规则. @{ ViewBag.Title = "Index"; Lay ...

  7. 在ASP.NET MVC中使用Knockout实践04,控制View Model的json格式内容

    通常,需要把View Model转换成json格式传给服务端.但在很多情况下,View Model既会包含字段,还会包含方法,我们只希望把字段相关的键值对传给服务端. 先把上一篇的Product转换成 ...

  8. 在ASP.NET MVC中使用Knockout实践02,组合View Model成员、Select绑定、通过构造器创建View Model,扩展View Model方法

    本篇体验使用ko.computed(fn)计算.组合View Model成员.Select元素的绑定.使用构造器创建View Model.通过View Model的原型(Prototype)为View ...

  9. [摘]在ASP.NET MVC中使用DropDownList

    在ASP.NET MVC中,尽管我们可以直接在页面中编写HTML控件,并绑定控件的属性,但更方便的办法还是使用HtmlHelper中的辅助方法.在View中,包含一个类型为HtmlHelper的属性H ...

随机推荐

  1. Dhaka2011

    Dhaka2011 A - Binary Matrix 题目描述:有一个\(n \times m\)的\(01\)矩阵,这一矩阵第一行和最后一行是相邻的,第一列和最后一列是相邻的,现在每次可以交换相邻 ...

  2. 【题解】BZOJ 1901: Zju2112 Dynamic Rankings

    题目传送门(权限题) 一道类似的非权限题 题意 N个数的序列,每次修改一个数或者询问区间里的第K小.可以离线. 简要做法 假如要求在线,可以树状数组套个线段树~ 但是这题是可以离线的,就可以乱搞整体二 ...

  3. linux挂载mount参数优化

    一. 1) 蓝色:表示经过优化的xfs mount时的参数defaults,noatime,nodiratime,nobarrier,discard,allocsize=256m,logbufs=8, ...

  4. 0行代码实现任意形状图片展示--android-anyshape

    前言 在Android开发中, 我们经常会遇到一些场景, 需要以一些特殊的形状显示图片, 比如圆角矩形.圆形等等.关于如何绘制这类形状, 网上已经有很多的方案,比如自定义控件重写onDraw方法, 通 ...

  5. java innerclasses(内部类)

    可以将一个类定义在另一个类的内部,这就是内部类 创建内部类的方式---把类的定义置于外部类的里面 典型的情况是,外部类将有一个方法,该方法返回一个指向内部类的引用,就像在to()和contents() ...

  6. java 接口与工厂

    接口时实现多重继承的途径,而生产遵循某个接口的对象的典型方式就是工厂方法设计模式,这与直接调用构造器不同,我们在工厂对象上调用的是某种方法,而该工厂对象将生成接口的某个实现的对象,理论上通过这种方式, ...

  7. c++中的前置声明

    引用google c++编码规范: When you include a header file you introduce a dependency that will cause your cod ...

  8. SpringMVC高级参数绑定(数组和List)

    本节内容: 参数绑定之数组 将表单的数据绑定到List 复制下上篇博客中的工程,作为今天开发的工程. 一.参数绑定之数组 1. 需求 在商品列表页面选中多个商品,然后删除. 2. 需求分析 功能要求商 ...

  9. Gitlab-使用其它API资源

    1. Users: 执行下面的任务去管理用户 List users Get, Create , edit, and delete a user List SSH keys for a given us ...

  10. Android导入依赖appcompat-v7报错

    Android导入依赖appcompat-v7报错   导入appcompat-v7时报错了 导入的是implementation 'com.android.support:appcompat-v7: ...