knockoutjs的MVVM机制

比眉伴天荒 2022-06-13 03:22 171阅读 0赞

强烈推荐一个大神的人工智能的教程：[http://www.captainbed.net/zhanghan][http_www.captainbed.net_zhanghan]

KnockOutJs是前端的一项技术，主要的机制是MVVM机制，所以支持双向绑定，在开发中简单了不少，他还有一些自己的特性，将在下边的小Demo中给出记录。

MVVM（即Model-View-ViewModel）,开始一直不理解这三部分分别对应的是什么，直到我看到一张图才恍然大悟。View就是用来给用户展示的，即用户可以看得到的页面HTML，ViewModel将会在下边的Demo中给出解释，先简单的解释是：我们在绑定的时候需要先声明observables，相当于一个对象，存的是需要绑定到页面上的内容。Model就是我们的后台处理了。

![Center][]

首先我的Demo目录结构如下：

![Center 1][]

第一个展示MVVM的Demo：

<!DOCTYPE html>
    <html>
    <head>
        <title>myFirstDemo</title>
    	<meta charset="utf-8" />
        <script type="text/javascript" src="../build/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src='../build/knockout-3.4.1.js'></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>
        <script>
            // 定义一个ViewModel
            var ViewModel = function (first, last) {
                this.firstName = ko.observable(first);
                this.lastName = ko.observable(last);
    
                this.fullName = ko.computed(function () {
                    // 根据firstName和lastNamecomputed出fullName
                    return this.firstName() + " " + this.lastName();
                }, this);
            };
            //knockout调用applybindings激活ViewModel，即，使得ViewModel与上述div中的静态绑定联系起来
            ko.applyBindings(new ViewModel("zhang", "zhang")); // This makes Knockout get to work
        </script>
    </body>
    </html>

效果图展示，下边展示的内容会根据input框中的内容变化而变化，对应着代码来讲，html页就是MVVM中的View，声明的ViewModel对应的是MVVM中的ViewModel，Model对应的是进行的处理，例如上边的this.fullName对应的function：

![Center 2][]

栗子就不一一举了，如果需要，可以联系我，我们共同探讨。

[http_www.captainbed.net_zhanghan]: http://www.captainbed.net/zhanghan
[Center]: /images/20220613/7b8faeff73354a17a3bc6a4cf8f4a3c7.png
[Center 1]: /images/20220613/bb3da743bbcc46c99ca540f9a500c56a.png
[Center 2]: /images/20220613/293437adc08e498b9654e2f1d43ac55a.png