zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    指针与数组关联导致的一些现象 分类: H_HISTORY 20130211 20:14 516人阅读 评论(0) 收藏
    宏定义一些内容 分类: H_HISTORY 20130207 23:20 585人阅读 评论(0) 收藏
    使用lstat()判断文件类型 分类: H_HISTORY 20130224 11:48 703人阅读 评论(0) 收藏
    关于VMware虚拟机的上网 分类: C_OHTERS 20130220 14:36 336人阅读 评论(0) 收藏
    Segmentation fault (core dumped) 分类: H_HISTORY 20130206 11:34 18800人阅读 评论(0) 收藏
    C语言内存分配时间 分类: H_HISTORY 20130211 10:51 1432人阅读 评论(3) 收藏
    GTK+与QT的对比 分类: H_HISTORY 20130205 09:27 3101人阅读 评论(0) 收藏
    枚举作为整数 分类: H_HISTORY 20130208 11:22 576人阅读 评论(0) 收藏
    01背包问题,动态规划求解
    求两个字符串的相似度或子串
  • 原文地址:https://www.cnblogs.com/qqhewei/p/11373844.html
Copyright © 2011-2022 走看看