knockout

最新推荐文章于 2024-04-22 15:43:49 发布

weixin_30412013

最新推荐文章于 2024-04-22 15:43:49 发布

阅读量243

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/qqhewei/p/11373844.html

版权

概念：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");

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

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

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

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

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

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

<!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>

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

 
          <!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>

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

weixin_30412013

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
knockout

概念：Knockoutjs是一个JavaScript实现的MVVM框架核心功能：1. Declarative bindings　　声明式绑定2. Observables and dependency tracking　　监听值得改变和依赖跟踪3. Templating　　模板使用步骤：1.往项目中拖进2.写一个ViewModel方法，在ViewModel方...
复制链接

扫一扫