[后端人员耍前端系列]KnockoutJs篇：快速掌握KnockoutJs

￡神魔★判官ぃ 2021-11-19 16:44 325阅读 0赞

# 一、引言 #

之前这个系列文章已经介绍Bootstrap。由于最近项目中，前端是Asp.net MVC + KnockoutJs + Bootstrap来做的。所以我又重新开始写这个系列。今天就让我们来看看Web前端的MVVM框架——KnockoutJs。

# 二、KnockoutJs是什么？ #

做.NET开发的人应该都知道，WPF中就集成了MVVM框架，关于WPF系列可以参考我WPF系列：[http://www.cnblogs.com/zhili/category/624221.html][http_www.cnblogs.com_zhili_category_624221.html]。所以KnockoutJs也是针对Web开发的MVVM框架。关于MVVM好处简单点来说就是——使得业务逻辑代码与页面展示代码分割开，使得前端项目更好维护。

之前，我们写Web页面的时候，JS代码和Html代码混合在一起，并且代码中充斥着大量的DOM对象的操作。这样代码结构非常混乱。有了MVVM框架了，你可以将JS代码和Html代码分割开，并且数据操作部分更加简单，只需要通过相应的语法（data-bind）绑定到对应的标签属性显示即可，从而加快开发速度。

KnockoutJs也就是这样一个MVVM框架。其实与其称其框架，更准备地应该是一个MVVM类库。因为它没有MVVM框架是一个比较“重”的概念，其中应该包括路由等特性。而KnockoutJS中却没有，相比较，AngularJS应该称为一个MVVM框架更加合适。

KnockoutJS主要实现的功能有以下4点：

*  声明式绑定（Declarative Bindings）：使用简单的语法将模型数据关联到DOM元素上。即"data-bind"语法
 *  依赖跟踪（Dependency Tracking）：为转变和联合数据，在模型数据之间建立关系。如商品总价是由各个商品项价格之和。此时商品总价和商品项就可以使用依赖跟踪功能来建立关系。即由各个商品项的总价相加而得出。这种关系由KnockoutJs中computed函数完成。
 *  UI界面自动刷新(Automatic UI Refresh):当你的模型状态改变时，UI界面的将自动更新。这点由observable函数完成。
 *  模板(Templating)：为您的模型数据快速编写复杂的可嵌套UI。和WPF中模板的概念类似。

接下来，我们通过具体的例子来让大家快速掌握KnockoutJs的使用。

# 三、声明式绑定 #

下面让我们看下如何使用KnockoutJS中的data-bind语法来将模型数据绑定到DOM元素中。

1.  单向绑定

<!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Demo1-单向绑定</title>
        <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"></script>
    </head>
        <body>
            
            <div>
                <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>
            </div>
        
            
            
            <script type="text/javascript">
                function ViewModel() {
                    this.firstName = "Tommy";
                    this.lastName = "Li";
                }
                ko.applyBindings(new ViewModel());
            </script>
        </body>
    </html>

在线演示地址：[http://sandbox.runjs.cn/show/4nruobca][http_sandbox.runjs.cn_show_4nruobca]

2. 上面的例子只是完成了单向绑定的操作。即在上面的例子你会发现，当改变input标签中的值并离开焦点时，上面的值不会更新。其实，KnockoutJS中自动更新功能不会自动添加的，需要对应的函数支持，这个函数就是observable函数，下面具体看看双向绑定的例子：

<!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Demo2-双向绑定</title>
        
        <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"></script>
    </head>
    <body>
        
        <div>
            <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>
        </div>
    
        <script type="text/javascript">
            function ViewModel() {
                this.firstName = ko.observable("Tommy");
                this.lastName = ko.observable("Li");
            }
            
            ko.applyBindings(new ViewModel());
        </script>
    </body>
    </html>

在线预览地址：[http://sandbox.runjs.cn/show/oe58jbs3][http_sandbox.runjs.cn_show_oe58jbs3]

# 四、依赖跟踪 #

接下来让我们看下如何使用KO中的computed函数来完成依赖跟踪。具体例子的实现代码如下所示：

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Demo3-依赖跟踪</title>
       
        <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"></script>
    </head>
    <body>
        
        <div>
            <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>
            <button data-bind="click: capitalizeLastName">LastName To Upper</button>
        </div>
    
        <script type="text/javascript">
            function ViewModel() {
                this.firstName = ko.observable("Tommy");
                this.lastName = ko.observable("Li");
                // 依赖跟踪
                this.fullName = ko.computed(function () {
                    return this.firstName() + " " + this.lastName();
                },this);
                
                // 通过代码改变observable的值
                this.capitalizeLastName = function() {
                    this.lastName(this.lastName().toUpperCase());
                };
            }
    
            ko.applyBindings(new ViewModel());
        </script>
    </body>
    </html>

在线预览地址：[http://sandbox.runjs.cn/show/t8yokfel][http_sandbox.runjs.cn_show_t8yokfel]

接下来，让我们看一下使用声明式绑定和依赖跟踪复杂点的例子。具体示例代码如下：

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Demo4-列表绑定</title>
        
        <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"></script>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <td>Name</td>
                    <td>Amount</td>
                    <td>Price</td>
                </tr>
            </thead>
            <tbody data-bind="foreach: items">
                <tr>
                    <td data-bind="text: product.name"></td>
                    <td><select data-bind="options:[1,2,3,4,5,6],value: amount"></select></td>
                    <td data-bind="text: subTotal"></td>
                    <td><a href="#" data-bind="click: $root.remove">Remove</a></td>
                </tr>
            </tbody>
        </table>
        <h3>Order Price: <span data-bind="text: price"></span></h3>
        <button data-bind="click: addComputer">Add a Computer</button>
    
        <script type="text/javascript">
            var products = [{ name: "Learnighard 学习笔记", price: 49 },
            { name: "小米Note", price: 999 },
                { name: "宏碁笔记本", price: 4999 }];
    
            // 订单类
            function Order() {
                var self = this;
                this.items = ko.observableArray([
                    new Item(products[0], 1),
                    new Item(products[1],2)
                ]);
                // 订单总价
                this.price = ko.computed(function() {
                    var p = 0;
                    for (var i = 0; i < self.items().length; i++) {
                        var item = self.items()[i];
                        p += item.product.price * item.amount();
                    }
                    return p;
                }, self);
    
                this.remove = function(item) {
                    self.items.remove(item);
                };
    
                this.addComputer = function () {
                    self.items.push(new Item(products[2], 1));
                };
            }
    
            // 订单项类
            function Item(product, amount) {
                var self = this;
                this.product = product;
                this.amount = ko.observable(amount);
                // 订单项总价
                this.subTotal = ko.computed(function() {
                    return self.amount() * self.product.price;
                }, self);
            }
            
            ko.applyBindings(new Order());
        </script>
    </body>
    </html>

在线预览地址为：[http://sandbox.runjs.cn/show/109jsjvz][http_sandbox.runjs.cn_show_109jsjvz]

# 五、模板 #

看完以上几个例子，其实你应该感觉到KO（KnockoutJS的简称）的上手还是非常简单的。因为其语法都非常容易理解，接下来看下KO中模板的使用。

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Demo5-模板绑定</title>
     
        <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"></script>
    </head>
        <body>
            
            
            
            <div data-bind="template:'personTemplate'"></div>
           
            <script id="personTemplate" type="text/html">
                <p>Name: <strong data-bind="text: name"></strong></p>
                <p>Age:  <strong data-bind="text: age"></strong></p>
            </script>
    
            <script type="text/javascript">
                var ViewModel = {
                    name: ko.observable('Tommy'),
                    age: ko.observable(28),
                    makeOlder: function() {
                        this.age(this.age() + 1);
                    }
                };
                
                ko.applyBindings(ViewModel);
            </script>
        </body>
    </html>

在线预览地址为：[http://sandbox.runjs.cn/show/3fnpkvrs][http_sandbox.runjs.cn_show_3fnpkvrs]

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Demo6-模板绑定</title>
        
        <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"></script>
    </head>
        <body>
            <h2>Participants</h2>
            Here are the participants:
            <div data-bind="template: { name: 'persontemplate', foreach: people }"></div>
    
            <script type="text/html" id="persontemplate">
                <h3 data-bind="text: name"></h3>
                <p>Age: <span data-bind="text: age"></span></p>
            </script>
            <script type="text/javascript">
                function MyViewModel() {
                    this.people = [
                        { name: 'Tommy', age: 27 },
                        { name: 'Frank', age: 33 }
                    ];
                }
                ko.applyBindings(new MyViewModel());
            </script>
        </body>
    </html>

在线预览地址为：[http://sandbox.runjs.cn/show/kujxhfgv][http_sandbox.runjs.cn_show_kujxhfgv][  
][http_sandbox.runjs.cn_show_3fnpkvrs]

关于模板更多的使用参考官方文档：[http://knockoutjs.com/documentation/template-binding.html][http_knockoutjs.com_documentation_template-binding.html]。本文只列出了2中模板的使用。

# 六、总结 #

到此，KnockoutJs的快速入门的内容就结束了，在一篇文章中继续为大家介绍KO内容，下一篇文章的内容将介绍如何使用KO来做一个实际的项目。

本文所有源码下载地址：[https://code.msdn.microsoft.com/KnockoutJs-d9472ff9][https_code.msdn.microsoft.com_KnockoutJs-d9472ff9]

转载于:https://www.cnblogs.com/zhili/p/konckoutjsQuickStart.html

[http_www.cnblogs.com_zhili_category_624221.html]: http://www.cnblogs.com/zhili/category/624221.html
[http_sandbox.runjs.cn_show_4nruobca]: http://sandbox.runjs.cn/show/4nruobca
[http_sandbox.runjs.cn_show_oe58jbs3]: http://sandbox.runjs.cn/show/oe58jbs3
[http_sandbox.runjs.cn_show_t8yokfel]: http://sandbox.runjs.cn/show/t8yokfel
[http_sandbox.runjs.cn_show_109jsjvz]: http://sandbox.runjs.cn/show/109jsjvz
[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211119/5df34fc5626a46039fdbda4ec0130da1.png
[http_sandbox.runjs.cn_show_3fnpkvrs]: http://sandbox.runjs.cn/show/3fnpkvrs
[http_sandbox.runjs.cn_show_kujxhfgv]: http://sandbox.runjs.cn/show/kujxhfgv
[http_knockoutjs.com_documentation_template-binding.html]: http://knockoutjs.com/documentation/template-binding.html
[https_code.msdn.microsoft.com_KnockoutJs-d9472ff9]: https://code.msdn.microsoft.com/KnockoutJs-d9472ff9