绑定数据Knockout学习之Hello World

最新推荐文章于 2019-08-22 20:31:17 发布

dyl_love98

最新推荐文章于 2019-08-22 20:31:17 发布

阅读量279

点赞数

文章标签：绑定数据

本文链接：https://blog.csdn.net/javablogs/article/details/8864836

版权

之前朋友几篇文章介绍了改绑定数据的文章. 关联文章的地址

现在Knockout.js的教程和视频也有不少，但多好都是1.x版本的，而官方的更新也是很踊跃。
所以我直接选择通过官方的小教程来习学。恰好也可以亲身验体一下MVVM。
①将数据绑定到DOM

<!DOCTYPE HTML>
<html>
<head>
    <script src="http://knockoutjs.com/js/jquery-1.4.2.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.1.0/knockout-min.js"></script>
</head>
<body>
    <!-- This is a *view* - HTML markup that defines the appearance of your UI -->
    <hr />
    <h3>绑定前：</h3>
    <p>First name: <strong>todo</strong></p>
    <p>Last name: <strong>todo</strong></p>
    <hr />
    <h3>绑定后：</h3>
    <p>First name: <strong data-bind="text:firstName">todo</strong></p>
    <p>Last name: <strong data-bind="text:lastName">todo</strong></p>
    <script type="text/javascript">
        // This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
        function AppViewModel() {
            this.firstName = "Bert";
            this.lastName = "Bertington";
        }

        // Activates knockout.js
        ko.applyBindings(new AppViewModel());
    </script>
</body>
</html>

效果：

②听监DOM的变更
当input容内变更时，绑定到该DOM的数据也会变更，随之而来的就是绑定了该数据的DOM也会更新。

<!DOCTYPE HTML>
<html>
<head>
    <script src="http://knockoutjs.com/js/jquery-1.4.2.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.1.0/knockout-min.js"></script>
</head>
<body>
    <!-- This is a *view* - HTML markup that defines the appearance of your UI -->

    <p>First name: <strong data-bind="text: firstName"></strong></p>
    <p>Last name: <strong data-bind="text: lastName"></strong></p>

    <p>First name: <input data-bind="value: firstName" /></p>
    <p>Last name: <input data-bind="value: lastName" /></p>
    <script type="text/javascript">
        // This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
        function AppViewModel() {
            this.firstName = ko.observable("Bert"); //ko.observable是听监firstName的键关。面里的参数是其初始值
            this.lastName = ko.observable("Bertington");
        }

        var model = new AppViewModel();

        // Activates knockout.js
        ko.applyBindings(model);
    </script>
</body>
</html>

每日一道理
坚持的昨天叫立足，坚持的今天叫进取，坚持的明天叫成功。

③某个DOM的值依赖于绑定的数据盘算后的结果；连接View和ViewModel的件事。

<!DOCTYPE HTML>
<html>
<head>
    <script src="http://knockoutjs.com/js/jquery-1.4.2.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.1.0/knockout-min.js"></script>
</head>
<body>
    <p>First name: <strong data-bind="text: firstName"></strong></p>
    <p>Last name: <strong data-bind="text: lastName"></strong></p>

    <p>First name: <input data-bind="value: firstName" /></p>
    <p>Last name: <input data-bind="value: lastName" /></p>
    
    <p>Full name: <strong data-bind="text: fullName" ></strong></p>
    
    <input type="button" data-bind="click:toUpper" value="To Upper" />
    <script type="text/javascript">
        // This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
        function AppViewModel() {
            this.firstName = ko.observable("");
            this.lastName = ko.observable("");
            this.fullName = ko.computed(function() {
                return this.firstName() + "--" + this.lastName();
            }, this);
            this.toUpper = function() {
                var c = this.lastName();
                this.lastName(c.toUpperCase());
            };
        }

        var model = new AppViewModel();

        // Activates knockout.js
        ko.applyBindings(model);
    </script>
</body>
</html>