knockoutjs的MVVM机制

来源：互联网发布：复杂网络可视化软件编辑：程序博客网时间：2024/06/03 14:44

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

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

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

第一个展示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：

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

阅读全文

3 0