Konckout第四个实例：组合类型数据绑定 -- 日期双向绑定显示 

<!doctype html>
<html >
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>
    KNOCKOUT LESSON 4
  </title>
  <link rel="stylesheet" type="text/css" href="css/main.css" />
  <style>
  #content1{padding:16px;}
  </style>
  <script type="text/javascript" src="scripts/knockout30.js"></script>
</head>

<body>
    <div id="content1">
        Year:<input data-bind="value:Year"><br/>
        Month:<input data-bind="value:Month"><br/>
        Day:<input data-bind="value:Day"><br/>
        Date:<span data-bind="html: Date " ></span><br/>
        <!--Date:<span data-bind="html:Year()+'-'+Month()+'-'+Day()"></span>-->
        <input data-bind="value:Date" />
    </div>
    
    <script type="text/javascript" src="scripts/jQuery183.js"></script>
    <script>
        $(document).ready(function(){
            var  ViewModel = function(){
                var self = this;
                self.Year = ko.observable("");
                self.Month = ko.observable("");
                self.Day = ko.observable("");
                
//                self.Date = ko.computed(function(){
//                    return self.Year()+'年'+self.Month()+'月'+self.Day()+'日';
//                });
                
                self.Date = ko.pureComputed({    
                    write: function(value){
                        var indexOfYear = value.indexOf('年');
                        var indexOfMonth=value.indexOf('月');
                        var indexOfDay=value.indexOf('日');
                        self.Year(value.substring(0,indexOfYear));
                        self.Month(value.substring(indexOfYear+1,indexOfMonth));
                        self.Day(value.substring(indexOfMonth+1,indexOfDay));
                    },
                    read: function(){
                        return self.Year()+'年'+self.Month()+'月'+self.Day()+'日';
                    },
                    owner:self
                });
            };
            var  currentViewModel = new ViewModel();
            ko.applyBindings(currentViewModel);
        });
    </script>
    
</body>
</html>

 使用正则过滤：当输入的是不符合规则的日期时：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            #content1{padding: 20px;}
        </style>
    </head>
    <body>
        <div id="content1">
            Year:<input data-bind="value:Year" /><br />
            Month:<input data-bind="value:Month" /><br />
            Day:<input data-bind="value:Day" /><br />
            Date:<span data-bind="html:Date"></span><br />
            <input data-bind="value:Date" />
        </div>
        
        <script src="scripts/jQuery183.js"></script>
        <script src="scripts/knockout30.js"></script>
    <script>
        $(document).ready(function(){
            var  ViewModel = function(){
                var self = this;
                self.Year = ko.observable("");
                self.Month = ko.observable("");
                self.Day = ko.observable("");
                
//                self.Date = ko.computed(function(){
//                    return self.Year()+'年'+self.Month()+'月'+self.Day()+'日';
//                });
                
                self.Date = ko.pureComputed({    
                    write: function(value){
                        var indexOfYear = value.indexOf('年');
                        var indexOfMonth=value.indexOf('月');
                        var indexOfDay=value.indexOf('日');
                        var year = value.substring(0,indexOfYear);
                        self.Year(year);
                        if(!/^\d(4)$/.test(year)){
                            alert('请输入四位阿拉伯数字的年份');
                            return false;
                        }
                        var month = value.substring(indexOfYear+1,indexOfMonth);
                        self.Month(month);
                        if(!/^[0-9][0-2]$/.test(month)){
                            alert('请输入合法月份数字');
                            return false;
                        }
                        var day = value.substring(indexOfMonth+1,indexOfDay);
                        self.Day(day);
                        if(!/^[0-3][0-9]$/.test(day)){
                            alert('请输入合法天数数字');
                            return false;
                        }
                    },
                    read: function(){
                        return self.Year()+'年'+self.Month()+'月'+self.Day()+'日';
                    },
                    owner:self
                });
            };
            var  currentViewModel = new ViewModel();
            ko.applyBindings(currentViewModel);
        });
    </script>
    </body>
</html>

 

posted @ 2017-04-21 09:51  党兴明  阅读(717)  评论(0)    收藏  举报