knockout

概念：Knockoutjs是一个JavaScript实现的MVVM框架

核心功能：

1. Declarative bindings　　声明式绑定

2. Observables and dependency tracking　　监听值得改变和依赖跟踪

3. Templating　　模板

使用步骤：

1.往项目中拖进

2.写一个ViewModel方法，在ViewModel方法里完成：

声明赋值 -》this.firstName = "Zixin" ; this.lastName = "Yin";

然后显示：<p data-bind="text: firstName"></p>

　　　　　<p data-bind="text: lastName"></p>

这样就可以完成显示了，把ViewModel方法中声明的值显示在<p>上

 

View就是<p>，Model就是this.firstName,this.lastName，必须要把View与Model关联起来才有效果，并且下面这行代码必须写到全部页面加载完成后调用

$(function () {
　　ko.applyBindings(new ViewModel());
});

 

接下来就是监听值的改变：

this.firstName = ko.observable("Zixin");
this.lastName = ko.observable("Yin");

<input data-bind="value: firstName" />
<input data-bind="value: lastName" />

这样就完成输入框值的改变，<p>标签显示的值也跟着改变

如果关联了多个值，其中一个值的改变，这个总值也跟着改变，就要用到　　ko.computed（）

this.fullName = ko.computed(function () {
　　return this.lastName() + " " + this.firstName();
}, this)

<p data-bind="text: fullName"></p>

如果点击某个按钮，引发其他值的改变就要用到　　this.lastName（改变的值）

this.capitalizeLastName = function () {
　　this.lastName(this.lastName().toUpperCase());
}

<button data-bind="click: capitalizeLastName">Caps</button>

以上就是绑定和监听的基本使用

复制代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="Scripts/jquery-1.7.1.min.js"></script>
    <script src="Scripts/knockout-3.4.2.js"></script>
    <script type="text/javascript">
        function ViewModel() {
            this.firstName = "Zixin";
            this.lastName = "Yin";
            this.firstName = ko.observable("Zixin");
            this.lastName = ko.observable("Yin");
            this.fullName = ko.computed(function () {
                return this.lastName() + " " + this.firstName();
            }, this)
            this.capitalizeLastName = function () {
                this.lastName(this.lastName().toUpperCase());
            }
        }
        $(function () {
            ko.applyBindings(new ViewModel());
        });
    </script>
</head>
<body>
    <div>       
        <p data-bind="text: firstName"></p>
        <p data-bind="text: lastName"></p>
        <input data-bind="value: firstName" />
        <input data-bind="value: lastName" />
        <p data-bind="text: fullName"></p>
        <button data-bind="click: capitalizeLastName">Caps</button>
    </div>
</body>
</html>
复制代码

实现下面这种订单效果，随着数量的变化，总金额也跟着改变

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="Scripts/jquery-1.7.1.min.js"></script>
    <script src="Scripts/knockout-3.4.2.js"></script>
    <script type="text/javascript">
 
        //一定要页面加载完成调用Model
        $(function () {
            ko.applyBindings(new Order());
        });
 
        var products = [{ name: "Thinkpad X1", price: 9000 },
{ name: "Hp ProBook", price: 5555 },
{ name: "Mouse", price: 45 }];
 
        function Order() {
            var self = this;
            self.items = ko.observableArray([
            //This data should load from server
                new Item(products[0], 1),
                new Item(products[1], 2)
            ]);
            self.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);
        }
 
        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);
        }
 
    </script>
</head>
<body>
    <div>
        <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>
                </tr>
            </tbody>
        </table>
        <h3>Order Price:<span data-bind="text: price"></span></h3>
 
    </div>
</body>
</html>
posted @ 2019-08-18 20:42  自不量力  阅读(343)  评论(0)    收藏  举报