Knockout js

724 views

Published on

knockout js by元泉

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
724
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Knockout js

  1. 1. Knockout.js 一个轻量级的UI类库,通过应用MVVM模式使 JavaScript前端UI简单化可以把KO当成通过编辑JSON数据来制作UI用户界面的一种方式官方网站:http://knockoutjs.com
  2. 2. MVVMModel-View-View Model 是一种创建UI的设计模式。• model: 你程序里存储的数据。• view model:在UI上,纯code描述的数据以及操作。• view:一个可见的,交互式的,表示view model状态的UI。
  3. 3. Knockout的4大概念:1. 声明式绑定 (Declarative Bindings)2. UI界面自动刷新 (Automatic UI Refresh)3. 依赖跟踪 (Dependency Tracking)4. 模板 (Templating)Knockout简称:KO
  4. 4. 1.创建一个view model,只需要声明任意的JavaScript object。例如:var myViewModel = { firstName: Bob, lastName: Smith};2.为view model创建一个声明式绑定的简单view。例如:The name is <span data-bind="text: personName"></span>3.激活Knockoutko.applyBindings(myViewModel);
  5. 5. Observables(监控属性)var myViewModel = { firstName : ko.observable(Bob), lastName : ko.observable( Smith)};不需要修改view , 所有的data-bind语法依然工作,不同的是他能监控到变化,当值改变时,view会自动更新。监控属性(observables)的读和写读:firstName() 写:lastName(‘YuanQuan’)
  6. 6. Dependent Observables(依赖监控属性)添加一个依赖监控属性来返回姓名全称:viewModel.fullName = ko.dependentObservable(function () { return this.firstName() + " " + this.lastName();}, viewModel);并且绑定到UI的元素上,例如:The name is <span data-bind="text: fullName"></span>
  7. 7. observable数组如果探测和响应一个集合的变化,应该用observableArraypop, push, shift, unshift, reverse, sort, splicemyObservableArray.remove(someItem)myObservableArray.remove(function(item) { return item.age < 18 })myObservableArray.removeAll([Chad, 132, undefined])
  8. 8. Hello World
  9. 9. 内置绑定1 visible 绑定
  10. 10. 内置绑定1 visible 绑定使用函数或者表达式来控制元素的可见性
  11. 11. 内置绑定2 text 绑定KO将参数值会设置在元素的innerText (IE)或textContent(Firefox和其它相似浏览器)属性上
  12. 12. 内置绑定3 html 绑定KO设置该参数值到元素的innerHTML属性上,元素之前的内容将被覆盖。
  13. 13. 内置绑定4 css 绑定非布尔值会被解析成布尔值。例如, 0和null被解析成false,21和非null对象被解析成true。
  14. 14. 内置绑定4 css 绑定如果你想使用my-class class,你不能写成这样:因为my-class不是一个合法的命名。解决方案是:在my-class两边加引号作为一个字符串使用。
  15. 15. 内置绑定5 style 绑定style绑定是添加或删除一个或多个DOM元素上的style值。比如:当数字变成负数时高亮显示,或者根据数字显示对应宽度的Bar。错误: { font-weight: someValue }; 正确: { fontWeight: someValue }
  16. 16. 内置绑定6 attr 绑定attr 绑定提供了一种方式可以设置DOM元素的任何属性值。你可以设置img的src属性,链接的href属性。使用绑定,当模型属性改变的时候,它会自动更新。错误: { data-url: someValue }; 正确: { “data-url”: someValue }
  17. 17. 内置绑定7 click 绑定每次点击按钮的时候,都会调用incrementClickCounter()函数,然后更新自动更新点击次数。
  18. 18. 内置绑定7 click 绑定你可以声明任何JavaScript函数 – 不一定非要是view model里的函数。你可以声明任意对象上的任何函数,例如:obj.someFunction。有些情况,你可能需要使用事件源对象,Knockout会将这个对象传递到你函数的第一个参数:
  19. 19. 内置绑定7 click 绑定默认情况下,KO会阻止默认的事件继续执行。如果你想让默认的事件继续执行,你可以在你click的自定义函数里返回true。防止事件冒泡:
  20. 20. 内置绑定8 event 绑定
  21. 21. 内置绑定9 更多绑定(不一一列举)http://knockoutjs.com/documentation/event-binding.html
  22. 22. 内置绑定9 foreach 绑定
  23. 23. 内置绑定9 foreach 绑定
  24. 24. 内置绑定9 foreach 绑定afterRender, afterAdd, beforeRemove 回调(可以做动画效果)
  25. 25. 内置绑定10 更多控制流绑定http://knockoutjs.com/documentation/if-binding.html
  26. 26. 自定义绑定
  27. 27. 模板绑定
  28. 28. 模板绑定
  29. 29. QA/吐槽

×