knockout

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

knockout_第1张图片

核心功能:

1. Declarative bindings  声明式绑定

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

3. Templating  模板

使用步骤:

1.往项目中拖进

2.写一个ViewModel方法,在ViewModel方法里完成:

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

然后显示:

     

这样就可以完成显示了,把ViewModel方法中声明的值显示在

 

View就是

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

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

 

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

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


这样就完成输入框值的改变,

标签显示的值也跟着改变

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

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

如果点击某个按钮,引发其他值的改变就要用到  this.lastName(改变的值)

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

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

复制代码



    
    
    
    
    


    

复制代码

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

knockout_第2张图片

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
"http://www.w3.org/1999/xhtml" >
     "Content-Type"  content= "text/html; charset=utf-8"  />
    
    
    
    
    
        
            
                
                    
                    
                    
                
            
            
"foreach:items" >
                
                    
                    
                    
                
            
        
Name Amount Price
"text: product.name" >
                         < select  data-bind= "options:[1,2,3,4,5,6],value: amount" > select >
"text: subTotal" >
        

Order Price: "text: price" >

 
    

转载于:https://www.cnblogs.com/qqhewei/p/11373844.html

你可能感兴趣的:(knockout)