博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Knockout学习笔记之一
阅读量:4320 次
发布时间:2019-06-06

本文共 1989 字,大约阅读时间需要 6 分钟。

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元素的值也会相应地发生变化,反之亦然。

                  

First Name:

Last Name:

FullName:

View Code

5. knockout例子(座位预订)

                

Your seat reservations

Passenger name Meal Surcharge
Remove

Total surcharge:$

View Code

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。

转载于:https://www.cnblogs.com/sccd/p/5971053.html

你可能感兴趣的文章
Part 2 - Fundamentals(4-10)
查看>>
使用Postmark测试后端存储性能
查看>>
NSTextView 文字链接的定制化
查看>>
第五天站立会议内容
查看>>
ATMEGA16 IOport相关汇总
查看>>
JAVA基础-多线程
查看>>
面试题5:字符串替换空格
查看>>
[Codevs] 线段树练习5
查看>>
Amazon
查看>>
component-based scene model
查看>>
Echart输出图形
查看>>
hMailServer搭建简单邮件系统
查看>>
从零开始学习jQuery
查看>>
Spring+SpringMVC+MyBatis深入学习及搭建(四)——MyBatis输入映射与输出映射
查看>>
opacity半透明兼容ie8。。。。ie8半透明
查看>>
CDOJ_24 八球胜负
查看>>
Alpha 冲刺 (7/10)
查看>>
一款jQuery打造的具有多功能切换的幻灯片特效
查看>>
SNMP从入门到开发:进阶篇
查看>>
@ServletComponentScan ,@ComponentScan,@Configuration 解析
查看>>