Knockout.js 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <!--    <style type="text/css">
        #aaa{width:400px;}
    </style>  -->
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/knockout-3.3.0.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var ViewModel = function (first, last) {
                this.firstName = ko.observable(first);
                this.lastName = ko.observable(last);
                this.fullName = ko.computed(function () {
                    // Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName.
                    return this.firstName() + " " + this.lastName();
                }, this);
            };
            ko.applyBindings(new ViewModel("Planet", "Earth")); // This makes Knockout get to work
        });
    </script>
</head>
<body>
    <div class='liveExample'>
        <p>
            First name:<input data-bind="value:firstName" /></p>
        <p>
            Last name:<input data-bind='value: lastName' /></p>
        <h2>
            Hello, <span data-bind='text: fullName'></span>!</h2>
    </div>
</body>
</html>

 

posted @ 2016-06-28 15:05  Chris_在IT道路上前行  阅读(120)  评论(0)    收藏  举报