knockoutjs -- applyBinding & Observables

applyBindings 
ko.applyBindings(myViewModel); // Knockout调用applyBindings激活myViewModel(即把myViewModel和View中的声明式绑定data-bind关联起来) 
ko.applyBindings(myViewModel, document.getElementById('someElementId')); // 限制只在指定对象someElementId和后代节点中进行激活操作。 
personName: ko.observable('Bob'), 
The name is <span data-bind="text: personName"></span>  // 静态绑定 

Observables
 
并不是所有的浏览器都支持JavaScript的getters和setters方法(IE),因此从兼容性考虑,ko.observable是function。 
读取observable属性:myViewModel.personName() 
设置observable属性:myViewModel.personName('Mary') 
同时设置多个observable属性:myViewModel.personName('Mary').personAge(50) 链式语法 

Javascript代码   收藏代码
  1. // 动态绑定(主动订阅,取消订阅)  
  2. var subscription = myViewModel.personName.subscribe(function(newValue) { /* do stuff */ });  
  3. // ...then later...  
  4. subscription.dispose(); // I no longer want notifications  
  5.   
  6. // Computed Observables  
  7.     this.fullName = ko.computed(function() {  
  8.         return this.firstName() + " " + this.lastName();  
  9.     }, this);  
  10.   
  11. var myObservableArray = ko.observableArray();    // Initially an empty array  
  12. myObservableArray.push('Some value');            // Adds the value and notifies observers  
  13.   
  14. // 初始化绑定数组  
  15. // This observable array initially contains three objects  
  16. var anotherObservableArray = ko.observableArray([  
  17.     { name: "Bungle", type: "Bear" },  
  18.     { name: "George", type: "Hippo" },  
  19.     { name: "Zippy", type: "Unknown" }  
  20. ]);  
  21.   
  22.   
  23. // 自定义排序  
  24. myObservableArray.sort(function(left, right) { return left.lastName == right.lastName ? 0 : (left.lastName < right.lastName ? -1 : 1) })  
  25.   
  26. // 可写的依赖属性 --- 数字自动格式化显示,保存值时移除无关逗号  
  27. function MyViewModel() {  
  28.     this.price = ko.observable(25.99);  
  29.            
  30.     this.formattedPrice = ko.computed({  
  31.         read: function () {  
  32.             return '$' + this.price().toFixed(2);  
  33.         },  
  34.         write: function (value) {  
  35.             // Strip out unwanted characters, parse as float, then write the raw data back to the underlying "price" observable  
  36.             value = parseFloat(value.replace(/[^\.\d]/g, ""));  
  37.             this.price(isNaN(value) ? 0 : value); // Write to underlying storage  
  38.         },  
  39.         owner: this  
  40.     });  
  41. }  
  42.    
  43. ko.applyBindings(new MyViewModel());  



Writeable computed observables可写的依赖属性(FirstName 和 FullName相互换算,数字自动格式化显示) 
ko.dependentObservable(Knockout 2.0中新增加的方法,和ko.computed等价,但是更加方便理解使用) 

Observable Arrays 
observableArray :跟踪的是数组中的对象,而不是对象的状态。即observableArray 仅跟踪它拥有的对象,并且在对象被添加或者删除的时候,通知listeners 。要监控对象的属性变化,需要编写独立的代码。 
由于observableArray()方法放回的是一个数组,因此从技术上来说,任何Javascript关于数组操作的原生方法都能直接使用。但是基于下述理由,通常推荐使用KO中的等价方法: 
1,KO中的方法支持所有主流浏览器(比如,Javascript原生方法indexOf在<=IE8时不正常,而KO的indexOf 能正常工作) 
2,dependency tracking 
3,语法更加简洁:调用KO中的方法使用myObservableArray.push(...),调用原生Javascript中的方法使用myObservableArray().push(...) 
具体每个方法参考下面链接中的文档 

observableArray 排序:默认对字符串用字母排序,对数字用数值排序。可以自定义排序方法:参考代码块中的代码 

参考:Observables

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值