knockout.js

Posted youguess

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了knockout.js相关的知识,希望对你有一定的参考价值。

knockout.js

1.创建数据模型和监控属性

<!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>

 

2.自动计算属性

2.1 Computed Observable

<!DOCTYPE html>
<html lang="en">
<head>
    <title>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 />

    <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>

2.2 分解用户输入

<!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>

2.3 值的转换(value 转换)

<!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>

2.4 筛选和验证用户输入

<!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>

 

以上是关于knockout.js的主要内容,如果未能解决你的问题,请参考以下文章

更新 knockout.js 和 SignalR 库后,knockout-mapping js 不会更新视图中的列表

Knockout.Js 中的多个 afterAdd 调用

bootstrap + knockout js 代码的默认选项卡

Knockout Js模板不显示数据

使用 Knockout.js 在表单输入上切换按钮状态

如何有条件地绑定到 knockout.js 中的“valueUpdate”?