Knockout学习之Hello World

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

 

效果:

Knockout学习之Hello World

②监听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>

 

 

 

你可能感兴趣的:(Hello world)