1.  四大关键理念：

　　A. DeclarativeBindings(声明式绑定)

　　Easily associate DOM elements with model data using a concise, readable syntax

　　使用简单易读的语法方便地将模型数据与DOM元素绑定在一起

　　B. AutomaticUIRefresh(页面自动刷新)

　　When your data model's state changes, your UI updates automatically

　　C. DependencyTracking（依赖追踪）

　　Implicitly set up chains of relationships between model data, to transform and combine it

　　使用可观察对象在模型数据之间设立隐性关系链，用于数据转换和绑定。

　　D. Templating（模板）

　　Quickly generate sophisticated, nested UIs as a function of your model data

　　内置模板引擎、为你的模型数据快速编写复杂的 UI 展现

2. 声明式绑定

　　声明式绑定即它的声明的同时也进行了绑定(自己的理解)。

3. applyBindings

　　Activates knockout.js -ko.applyBindings(new AppViewModel());

　　激活knockout.js（即激活data-bind属性）

4. observables - these are properties that automatically will issue notifications whenever their(View Models)  value changes

　　双向绑定，当ViewModel中的值发生变化时，Dom元素的值也会相应地发生变化，反之亦然。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

    <title></title>

    <script type="text/javascript" src="knockout-3.4.0.js"></script>

       <script type="text/javascript">

        window.onload = function ()

        {

             ko.applyBindings(new AppViewModel());

        }

    function AppViewModel()

    {

        this.firstName = ko.observable("Hello ");

        this.lastName = ko.observable("World!");

        this.fullName = ko.computed(function () {

            return this.firstName() + " " + this.lastName();

        },this);

        this.capitalizeLastName = function ()

        {

            var currentVal = this.lastName();

            this.lastName(currentVal.toUpperCase());

        }

    }

    </script>

</head>

<body>

   <P>First Name:<input data-bind="value: firstName" /></P>

   <P>Last Name:<input data-bind="value: lastName" /></P>

   <p>FullName:<input data-bind="value: fullName" /></p>

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

</body>

</html>

5. knockout例子（座位预订）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

    <title></title>

    <script type="text/javascript" src="knockout-3.4.0.js"></script>

    <script type="text/javascript">

        function SeatReservation(name,initialMeal)

        {

            var self = this;

            self.name = name;

            self.meal = ko.observable(initialMeal);

            self.formattedPrice = ko.computed(function () {

                var price = self.meal().price;

                return price ? "$" + price.toFixed(2) : "None";

            });

        }

        function ReservationsViewModel()

        {

            var self = this;

            self.availableMeals = [

                { mealName: "Standard(Sandwich)", price: 0 },

                { mealName: "Premium:(lobster)", price: 34.95 },

                { mealName:"Ultimate(whole zebra)",price:290}

            ];

            self.seats = ko.observableArray([

                new SeatReservation("Steve", self.availableMeals[0]),

                new SeatReservation("Bert", self.availableMeals[0])

            ]);

            self.addSeat = function () {

                self.seats.push(new SeatReservation("", self.availableMeals[0]));

            };

            self.removeSeat = (function (seat) {

                self.seats.remove(seat);

            });

            self.totalSurcharge = ko.computed(function () {

                var total = 0;

                for (var i = 0; i < self.seats().length; i++)

                {

                    total += self.seats()[i].meal().price;

                }

                return total;

            })

        }

        window.onload = function () {

            ko.applyBindings(new ReservationsViewModel());

        }

    </script>

</head>

<body>

    <h2>Your seat reservations</h2>

    <table>

        <thead>

            <tr>

                <th>Passenger name</th>

                <th>Meal</th>

                <th>Surcharge</th>

            </tr>

        </thead>

        <tbody data-bind="foreach:seats">

            <tr>

            <td><input data-bind="value:name"/></td>

            <td><select data-bind="options:$root.availableMeals,value:meal,optionsText:'mealName'"></select></td>

            <td data-bind="text:formattedPrice"></td>

            <td><a href="#" data-bind="click:$root.removeSeat">Remove</a></td>

            </tr>

        </tbody>

    </table>

    <h3 data-bind="visible:totalSurcharge()>0">

        Total surcharge:$<span data-bind="text:totalSurcharge().toFixed(2)"></span>

    </h3>

    <button data-bind="click:addSeat,enable:seats().length<10">Reserve another seat</button>

</body>

</html>

6.Knockout使用<!--ko--><!--/ko-->来表示循环的开始和结束;

   切记不是注释！

7. 总结分析：

问题一：在第一个例子中，在调用ko.computed（）方法时，第二个参数this的作用？

答：这个和JS中的基本一致，是为了ko.computed()方法内部的使用而传入的；

问题二：在第二个例子中，什么时候用meal,什么时候用meal()？（以下为官网说法）

　 Notice that, because the meal property is an observable, it's important to invoke meal() as a function (to obtain
　 its current value) before attempting to read sub-properties. In other words, write meal().price, not meal.price.

因为meal的属性是observable，在获取该类型当前值时，必须将其作为一个函数来使用，即 meal() ，换句话说就是meal().price，而不是meal.price。

Knockout学习笔记之一的更多相关文章

  1. knockout学习笔记目录

    关于knockout学习系列的文章已经写完,这里主要是做个总结,并且将目录罗列出来,方便查看.欢迎各位大神拍砖和讨论. 总结 kncokout是一个轻量级的UI类库,通过MVVM模式使前端的UI简单话 ...

  2. knockout学习笔记10：demo

    前面已经介绍了ko的基本用法,结合官方文档,基本就可以实际应用了.本章作为ko学习的最后一篇,实现一个简单的demo.主要集中在ko,所以后台数据都是静态的.类似于博园,有一个个人文章的分类列表,一个 ...

  3. Knockout学习笔记之二（$root，$parent及$data的区别）

    以下是我从Google上找到的一个例子,非常生动形象,我修改了部分代码,具体内容如下: 对于$root 与$parent的区别: $root refers to the view model appl ...

  4. KnockoutJs学习笔记（五）

    作为一名初学者来说,一篇篇的按顺序看官网上的文档的确是一件很痛苦的事情,毕竟它的排列也并非是由浅及深的排列,其中的顺序也颇耐人寻味,于是这篇文章我又跳过了Reference部分,进而进入到具体的bin ...

  5. Knockout.js快速学习笔记

    原创纯手写快速学习笔记(对官方文档的二手理解),更推荐有时间的话读官方文档 框架简介(Knockout版本:3.4.1 ) Knockout(以下简称KO)是一个MVVM(Model-View-Vie ...

  6. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  7. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

  8. PHP-会员登录与注册例子解析-学习笔记

    1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...

  9. 2014年暑假c#学习笔记目录

    2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...

随机推荐

  1. 《Linux内核分析》第七周 可执行程序的装载

    [刘蔚然 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000] WEEK SEVEN ...

  2. fbset 移植

    手头上的文件系统的fbset有问题,所以就自己从新移植一个到开发板上. 参考链接 http://blog.chinaunix.net/uid-20768928-id-5748009.html 下载地址 ...

  3. Bugzilla说明

    简介 Bugzilla是Mozilla公司向我们提供的一个开源的免费缺陷跟踪工具.作为一个产品缺陷的记录及跟踪工具,它能够为你建立一个完善的Bug跟踪体系,包括报告Bug.查询Bug记录并产生报表.处 ...

  4. angularJ表单验证

    常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" requir ...

  5. springMVC中利用model在JSTL进行回填值

    1.ringMVC中利用model回填值 后台中,利用model返回值,如 model.addAttribute("MS_info" , MS_info); 前台回填值: text ...

  6. ArrayBlockingQueue，BlockingQueue分析

    BlockingQueue接口定义了一种阻塞的FIFO queue,每一个BlockingQueue都有一个容量,让容量满时往BlockingQueue中添加数据时会造成阻塞,当容量为空时取元素操作会 ...

  7. 微软自带的Serialization和Newtonsoft简单测试

    刚刚对这两个进行了一下小小的测试 发现 当转换的内容少的时候  微软自带的比Newtonsoft速度要快一些,内容多的时候反之,当内容多到一定量的时候微软自带的就不能转换了,需要修改一下MaxJson ...

  8. NULLIF()函数使用讲解

    NULLIF()函数接受两个参数.如果它们相等,那么返回空值:否则,返回第一个参数. 等价于下面的表达式: case when expression1=expression2 then null el ...

  9. 【翻译】hololens入门

      欢迎!我们很高兴您发现这里并做好了全息投影奇幻之旅的准备.本页面的全部内容都经由我们的工程师团队精心打造,因此这会让人觉得本页面是由软件工程师制作(别忘了,我们是全息投影技术的缔造者,而不是网页制 ...

  10. 0506 Scrum 项目1.0

    团队名称:√3 团队目标:全力完成这次的项目 团队口号:我要改变世界,改变自己!!! 演讲稿:我们的产品 鸡汤精选 是为了解决 当下社会出现的太多的负能量使得人们的内心十分 的痛苦, 他们需要强大的正 ...