knockout.js

DOCTYPE html>
html>
head>
    title>title>
    meta charset="UTF-8" />
    script type="application/javascript" src="../js/knockout-3.1.0.js">script>
head>
body>

    h1>姓名:strong data-bind="text:personName">strong>h1>
    h2>年龄:strong data-bind="text:personAge">strong>h2>


    input id="txtName" type="text" data-bind="value:personName">
    input id="txAge" type="text" data-bind="value:personAge" />
    br />

    button onclick="cancelSubscribe()">取消订阅button>
    
    script>
        var subscription=null;
        var ViewModel1={
            personName:ko.observable("123"),//KO的双向绑定
            personAge:ko.observable()//
        };
        ko.applyBindings(ViewModel1);//激活KO
        //开启订阅
        subscription=ViewModel1.personAge.subscribe(function (newValue) {
            if(isNaN(newValue)){
                alert("请输入数字！");
                ViewModel1.personAge("");
            }
        });
        function cancelSubscribe() {
            if (subscription) {
                subscription.dispose();//取消订阅
            }
        }
    script>
body>
html>

DOCTYPE html>
html lang="en">
head>
    title>Titletitle>
    meta charset="UTF-8">
    script type="application/javascript" src="../js/knockout-3.1.0.js">script>
head>
body>
    firstName is span data-bind="text:firstName">span>br/>
    lastName is span data-bind="text:lastName">span>br />
    fullName is span data-bind="text:fullName">span>br/>
    input type="text" data-bind="value:firstName" />br/>
    input type="text" data-bind="value:lastName" />br />

    script type="application/javascript">
        function viewModel() {
            var self =this;
            self.firstName = ko.observable("");
            self.lastName =ko.observable("");
            //this关键字 计算属性
            self.fullName = ko.computed(function () {
               return  self.firstName()+‘.‘+self.lastName();
            },self);
        }
        ko.applyBindings(viewModel);
    script>
body>
html>

DOCTYPE html>
html lang="en">
head>
    title>分解用户输入title>
    meta charset="UTF-8">
    script type="application/javascript" src="../js/knockout-3.1.0.js">script>

head>
body>

    firstName is span data-bind="text:firstName">span>br/>
    lastName is span data-bind="text:lastName">span>br />
    fullName is span data-bind="text:fullName">span>br/>
    input type="text" data-bind="value:firstName" />br/>
    input type="text" data-bind="value:lastName" />br />
    input type="text" data-bind="value:fullName" />

    script type="application/javascript">
        function ViewModel() {
            var self =this;
            self.firstName = ko.observable("");
            self.lastName =ko.observable("");
            self.fullName=ko.computed({
                read: function () { //读取 显示
                    return this.firstName() + " " + this.lastName();        
                },
                write:function (value) { //输入的操作
                    var lastSpacePos = value.lastIndexOf(" ");
                    if(lastSpacePos>0){
                        this.firstName(value.substring(0, lastSpacePos));
                        this.lastName(value.substring(lastSpacePos + 1));
                    }
                },
                owner:self
            });

        }
        ko.applyBindings(ViewModel);

    script>

body>
html>

DOCTYPE html>
html lang="en">
head>
    title>value值转换title>
    meta charset="UTF-8">
    script type="application/javascript" src="../js/knockout-3.1.0.js">script>
head>
body>

     数字是 span data-bind="text:price ">span>br/>
     价格是 input type="text" data-bind="value:formattedPrice" />br/>

    script>
        function viewModel() {
            var self=this;
            self.price = ko.observable(12.445);
            self.formattedPrice=ko.computed({
                read:function () {
                    return ‘$‘ + self.price().toFixed(2);//
                },
                write:function (value) {
                    value = parseFloat(value.replace(/[^\.\d]/g, ""));//
                    self.price(isNaN(value) ? 0 : value);//
                },
                owner:self
            });
        }
        ko.applyBindings(viewModel);
    script>

body>
html>

DOCTYPE html>
html lang="en">
head>
    title>筛选和验证用户输入title>
    meta charset="UTF-8">
    script type="application/javascript" src="../js/knockout-3.1.0.js">script>
head>
body>
    请输入新的价格：input  id="txtNumber" type="text" data-bind="value:attemptedValue"/>
    div data-bind="visible:!lastInputWasValid()">
        font color="red">请输入数字！font>
    div>

    script>
        function MyViewModel() {
            this.acceptedNumericValue = ko.observable(123);
            this.lastInputWasValid = ko.observable(true);//控制显示 true/false

            this.attemptedValue = ko.computed({//输入的值
                read: this.acceptedNumericValue,
                write: function (value) {
                    if (isNaN(value))
                        this.lastInputWasValid(false);
                    else {
                        this.lastInputWasValid(true);
                        this.acceptedNumericValue(value);
                    }
                },
                owner: this
            });
        }
        ko.applyBindings(new MyViewModel());
    script>
body>
html>