`
desert3
  • 浏览: 2160891 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

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) 链式语法
// 动态绑定(主动订阅,取消订阅)
var subscription = myViewModel.personName.subscribe(function(newValue) { /* do stuff */ });
// ...then later...
subscription.dispose(); // I no longer want notifications

// Computed Observables
    this.fullName = ko.computed(function() {
        return this.firstName() + " " + this.lastName();
    }, this);

var myObservableArray = ko.observableArray();    // Initially an empty array
myObservableArray.push('Some value');            // Adds the value and notifies observers

// 初始化绑定数组
// This observable array initially contains three objects
var anotherObservableArray = ko.observableArray([
    { name: "Bungle", type: "Bear" },
    { name: "George", type: "Hippo" },
    { name: "Zippy", type: "Unknown" }
]);


// 自定义排序
myObservableArray.sort(function(left, right) { return left.lastName == right.lastName ? 0 : (left.lastName < right.lastName ? -1 : 1) })

// 可写的依赖属性 --- 数字自动格式化显示,保存值时移除无关逗号
function MyViewModel() {
    this.price = ko.observable(25.99);
         
    this.formattedPrice = ko.computed({
        read: function () {
            return '$' + this.price().toFixed(2);
        },
        write: function (value) {
            // Strip out unwanted characters, parse as float, then write the raw data back to the underlying "price" observable
            value = parseFloat(value.replace(/[^\.\d]/g, ""));
            this.price(isNaN(value) ? 0 : value); // Write to underlying storage
        },
        owner: this
    });
}
 
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
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics