zoukankan      html  css  js  c++  java
  • (二)Knockout

    计算属性

    实际应用中,我们通常需要对数据进行加工

    如: 指定日期格式,将数字相加... 等,此时可使用ko.computed()。当数据发生改变是,KO会使用computed重新计算

    DEMO1

    更改firstName,lastName值后改变fullName

     var AppViewModel = function() {
    var me = this; me.firstName = ko.observable('Bob'); me.lastName = ko.observable('Smith'); me.fullName = ko.computed(function () { return me.firstName() + " " + me.lastName(); }, this); } ko.applyBindings(new AppViewModel());

    绑定到View上

    <p>First name: <input data-bind="value: firstName"/></p>
    <p>Last name: <input data-bind="value: lastName"/></p>
    <h2>Hello,   <span data-bind="text: fullName"/>!</h2>
    

    DEMO2

    修改fullName,从而更新firstName,lastName的值

    <p>First name: <input data-bind="value: firstName"/></p>
    <p>Last name: <input data-bind="value: lastName"/></p>
    <h2>Hello,   <span data-bind="value: fullName"/>!</h2>
    self.fullName = ko.computed({
        read: function () {
            return me.firstName() + " " + me.lastName();
        },
        write: function (value) {
            var lastSpacePos = value.lastIndexOf(" ");
            if (lastSpacePos > 0) { // Ignore values with no space character
                me.firstName(value.substring(0, lastSpacePos)); // Update "firstName"
                me.lastName(value.substring(lastSpacePos + 1)); // Update "lastName"
            }
        },
        owner: me
    });

    DEMO3

    金额格式的自动转换(包括精度和格式)已经垃圾字符的过滤

    <p>Enter bid price: <input data-bind="value: formattedPrice"/></p><br/>
    var parseModel = function() {
        var me = this;
        me .price = ko.observable(25.99);
        me .formattedPrice = ko.computed({
            read: function() {
                return '$' + me.price().toFixed(2);    
            },
            write: function(val) {
                val = parseFloat(value.replace(/[^.d]/g, ""));
                me.price(isNaN(val ) ? 0 : val ); 
            },
            owner: me
        });
          
    };
    ko.applyBindings(new parseModel());

    DEMO4

    过滤并验证用户输入

    <p>Enter a numeric value: <input data-bind="value: attemptedValue"/>
        <span data-bind="visible:lastInputWasValid()">验证通过</span>
    </p>
    var MyViewModel = function() {
        var me = this;
        me.acceptedNumericValue = ko.observable(123);
        me.lastInputWasValid = ko.observable(true);
    
        me.attemptedValue = ko.computed({
            read: me.acceptedNumericValue,
            write: function (value) {
                if (isNaN(value))
                    me.lastInputWasValid(false);
                else {
                    me.lastInputWasValid(true);
                    me.acceptedNumericValue(value); // Write to underlying storage
                }
            },
            owner: me
        });
    }
    
    ko.applyBindings(new MyViewModel());
  • 相关阅读:
    distroless 镜像介绍及调试基于distroless 镜像的容器
    C# 设置或验证 PDF中的文本域格式 E
    Java 在PDF中添加工具提示|ToolTip E
    MongoDB Security
    Spring Boot MongoDB
    MongoDB 安装
    nginx重试机制proxy_next_upstream
    (转)VC中等比例缩放图像
    5 Ways You can Learn Programming Faster
    如何批量去除文件名中的某些字符串?
  • 原文地址:https://www.cnblogs.com/huair_12/p/4223664.html
Copyright © 2011-2022 走看看