Knockout学习（1）之observable，监控文本

最新推荐文章于 2018-10-23 15:25:44 发布

流觞曲水向东流

最新推荐文章于 2018-10-23 15:25:44 发布

阅读量1.2k

点赞数 1

分类专栏： Knockout 文章标签： Knockout

本文链接：https://blog.csdn.net/qq_33265875/article/details/80655480

版权

Knockout 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Knockout的具体介绍我这里就不详情说了，对于初学者来说，我们首先要知道两个属性：1.监控属性；2.绑定属性，只要知道了了解这连个属性，学习起来就简单多了。

ko监控字符串值的关键字为：observable，

绑定文本框的关键字为：value，绑定非文本框的关键字为：text；

直接上代码：

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
<head>
    <script src="~/Scripts/Knockout.js"></script>
    <script src="~/Scripts/knockout-map.js"></script>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/jquery.json.min.js"></script>


    <script>
        $(function ($) {
            var ViewMode={};
            ViewMode =function () {
                this.UserName = ko.observable("张三");//observable代表跟踪，括号里的"张三"为初始值
                this.Age = ko.observable("21");
                this.ShowInfo = ko.pureComputed(function () {
                    return "姓名："+this.UserName() + "，年龄：" + this.Age();
                }, this);
            }; 
           ko.applyBindings(ViewMode);                    
        });
    </script>
</head>
<body>
    @*value：绑定文本框的值*@
    姓名：<input type="text"  data-bind="value:UserName"/><br />
    年龄：<input  type="text"  data-bind="value:Age">
    信息：<span data-bind="text:ShowInfo"></span>
</body>

效果如下：

每个属性可以多次绑定，代码如下：

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
<head>
    <script src="~/Scripts/Knockout.js"></script>
    <script src="~/Scripts/knockout-map.js"></script>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/jquery.json.min.js"></script>


    <script>
        $(function ($) {
            var ViewMode={};
            ViewMode =function () {
                this.UserName = ko.observable("张三");//observable代表跟踪，括号里的"张三"为初始值
                this.Age = ko.observable("21");
                this.ShowInfo = ko.pureComputed(function () {
                    return "姓名："+this.UserName() + "，年龄：" + this.Age();
                }, this);
            }; 
           ko.applyBindings(ViewMode);                    
        });
    </script>
</head>
<body>
    @*value：绑定文本框的值*@
    姓名：<input type="text"  data-bind="value:UserName"/><br />
    年龄：<input  type="text"  data-bind="value:Age">
    信息：<span data-bind="text:ShowInfo"></span><br />
    信息2：姓名：<span data-bind="text:UserName"></span>，年龄：<span data-bind="text:Age"></span>
</body>

效果如下：