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

□ 使用ko.computed(fn)计算成员

有时候,我们希望把View Model中的几个成员组合起来成为一个新成员,使用ko.computed(fn)可实现。

接着上一篇,为productViewModel这个json对象增加一个计算成员。

<div data-bind="text:formatted"></div> <hr/>
<input type="text" data-bind="value:name"/>

@section scripts
{
    <script src="~/Scripts/knockout-2.2.0.js"></script>
    <script type="text/javascript">
        $(function() {

            $.getJSON('@Url.Action("GetFirstProduct","Home")', function (data) {
                productViewModel.name(data.Name);
                productViewModel.category(data.Category);
            });
        });

        var productViewModel = {
            id: ko.observable(""),
            name: ko.observable("初始值"),
            price: ko.observable(""),
            category: ko.observable("")
        };

        //为productViewModel增加一个计算成员
        productViewModel.formatted = ko.computed(function() {
            return productViewModel.name() + "--" + productViewModel.category();
        });

        //绑定
        ko.applyBindings(productViewModel);
    </script>


以上,对于在View Model中的成员,如果已经被赋予observable后,必须通过类似name()的方式获取成员值。

□ Select元素的绑定

对于Select元素,它的options属性应该绑定一个数组,它的value属性绑定一个选中值。

<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) {
                productViewModel.name(data.Name);
                productViewModel.category(data.Category);
            });
        });

        var productViewModel = {
            id: ko.observable(""),
            name: ko.observable("初始值"),
            price: ko.observable(""),
            category: ko.observable(""),
            categories: ["小说","散文","传记"]
        };

        //为productViewModel增加一个计算成员
        productViewModel.formatted = ko.computed(function() {
            return productViewModel.name() + "--" + productViewModel.category();
        });

        //绑定
        ko.applyBindings(productViewModel);
    </script>
}


□ 使用构造器创建View Model

<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 Product = function(name, category, categories) {
            this.name = ko.observable(name);
            this.category = ko.observable(category);
            this.categories = categories;

            this.formatted = ko.computed(function() {
                return this.name() + "--" + this.category();
            }, this);
        };

        var product = new Product("默认值", "默认值", ["小说", "散文", "传记"]);

        //绑定
        ko.applyBindings(product);
    </script>
}


□ 为View Model原型(Prototype)扩展方法

以上,ko.computed中使用了一个匿名函数,如果把这个匿名函数作为Product的扩展方法,该如何做到呢?

<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 Product = function(name, category, categories) {
            this.name = ko.observable(name);
            this.category = ko.observable(category);
            this.categories = categories;

            this.formatted = ko.computed(this.getFormatted, this);
        };



        ko.utils.extend(Product.prototype, {
            getFormatted: function() {
                return this.name() + "--" + this.category();
            }
        });

        var product = new Product("默认值", "默认值", ["小说", "散文", "传记"]);

        //绑定
        ko.applyBindings(product);
    </script>
}

以上,通过ko.utils.extend方法,为Product的原型添加了扩展方法getFormatted。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  8. 在ASP.NET MVC中使用Knockout实践03,巧用data参数

    使用Knockout,当通过构造函数创建View Model的时候,构造函数的参数个数很可能是不确定的,于是就有了这样的一个解决方案:向构造函数传递一个object类型的参数data. <inp ...

  9. 关于ASP.NET MVC中Response.Redirect和RedirectToAction的BUG (跳转后继续执行后面代码而不结束进程)以及处理方法

    关于ASP.NET MVC中Response.Redirect和RedirectToAction的BUG (跳转后继续执行后面代码而不结束进程)以及处理方法   在传统的ASP.NET中,使用Resp ...

随机推荐

  1. Java 在方法和作用域内的内部类

    通常,如果所读写 的代码包含了内部类,那么它们都是"平凡的"内部类,简单并且容易理解,然而,内部类的语法覆盖了大量其它的更加难以理解的计数,例如可以在一个方法里或者在任意的作用域里 ...

  2. (一)Dubbo简介

    Dubbo是阿里巴巴公司开源的一个高性能优秀的服务框架,使得应用可通过高性能的 RPC 实现服务的输出和输入功能,可以和Spring框架无缝集成.具体可以看 百度百科 https://baike.ba ...

  3. 001_Eclipse编写第一个Java程序

    1 下载并安装jdk 2 下载较新版本的eclipse,eclipse都是非安装版的,解压缩即可. 3 双击eclipse.exe,打开elipse软件 4 FileàNewàProject 5 选择 ...

  4. Maximum Shortest Distance 最大团 二分答案 HDU 3585

    题意:给出n个点   要求取k个点  这k个点中  距离最小的两个点要求距离最大 拿到手看不出是最大团  也看不出是二分答案(第一次用) 因为答案必然存在 一定有一个最值  所以用二分答案来做 最大距 ...

  5. ResourceBundle.getBundle方法demo

    这个参考链接 http://blog.csdn.net/tgyman/article/details/56012706

  6. word2013 如何设置从第三页开始编码 或 如何设置封面页和正文页页码不连续

    首先说明一下 “分节符”作用,它就是用来将整个文档分节的,添加一个分节符,文档就分成1.2两节:添加两个分节符,文档就分成1.2.3节. 当前页面具体是第几节,可以通过点击页眉页脚来查看: 从第三页开 ...

  7. JS代码浏览器兼容性 之 new Date()

    这里只测试3个浏览器的情况:IE, 火狐,谷歌. 一. 无参 //无参 var dateTime = new Date(); 所有浏览器都兼容,GOOD 二. 日期参数 //日期参数 格式1 var ...

  8. 001.SSH配置文件

    一 ssh配置文件路径 1.1 ssh客户端配置文件: 路径:/etc/ssh/ssh_config 1.2 ssh服务端配置文件: 路径:/etc/ssh/sshd_config 二 服务器端常用配 ...

  9. 利用angular指令监听ng-repeat渲染完成后执行脚本

    业务中有时需要在异步获取数据并用ng-repeat遍历渲染完页面后执行某个操作,angular本身并没有提供监听ng-repeat渲染完成的指令,所以需要自己动手写.有经验的同学都应该知道,在ng-r ...

  10. Redis 的线程模型

    redis 内部使用文件事件处理器 file event handler,这个文件事件处理器是单线程的,所以 redis 才叫做单线程的模型.它采用 IO 多路复用机制同时监听多个 socket,根据 ...