konckoutJS
KO主要功能
优雅的依赖性跟踪 -当数据模型变化时,自动更新你的UI。
声明绑定 -一个浅显的方式来将UI的部分连接到你的数据模型。您可以轻松地构建利用任意嵌套绑定上下文来组成复杂的动态用户界面。
扩展 -使用短短的几行代码重用实现自定义行为作为。
模型-视图
//绑定文本
var myViewModel = {
personName: 'Bob',
personAge: 123
};
ko.applyBindings(myViewModel); //激活KO的绑定关系
计算属性:
注意this绑定:
ko.computed(function() {
});
this绑定方法一:
function AppViewModel() {
var self = this;
self.firstName = ko.observable('Bob');
self.lastName = ko.observable('Smith');
self.fullName = ko.computed(function() {
return self.firstName() + " " + self.lastName();
});
}
this绑定方法二:
function AppViewModel() {
this.fullName = ko.computed(function() {
return this.firstName() + " " + this.lastName();
}, this);
}
可见文本绑定(visible)
可见?不可见?
var viewModel = {
shouldShowMessage: ko.observable(true) // Message initially visible
};
viewModel.shouldShowMessage(false); // ... now it's hidden
viewModel.shouldShowMessage(true); // ... now it's visible again
foreach绑定
foreach绑定主要用于循环展示监控数组属性中的每一个元素,一般用于table标签中;
假设你有一个监控属性数组,每当您添加,删除或重新排序数组项时,绑定将有效地更新UI的DOM-插入或去除相关项目或重新排序现有的DOM元素,不影响任何其他的DOM元素。
当然,也可以配合其他控制流一起适用,例如if
和with
。
遍历监控属性数组:
clilck绑定
You've clicked times
var viewModel = {
numberOfClicks : ko.observable(0), //数据点击次数初始0
incrementClickCounter : function() {
var previousCount = this.numberOfClicks(); //获取现在次数;
this.numberOfClicks(previousCount + 1); //现在次数加一;
}
};
ko.applyBindings(viewModel); //激活ko绑定关系;
foreach 加 click 绑定:
Remove
function MyViewModel() {
var self = this;
self.places = ko.observableArray(['London', 'Paris', 'Tokyo']); //监控属性数组
self.removePlace = function(place) {
self.places.remove(place) //删除的是监控属性数组中的元素来控制dom渲染
}
}
ko.applyBindings(new MyViewModel());激活ko绑定关系
备注:与Jquery互动
如果存在Jquery的click事件,KO将会去调用Jquery的click事件,如果你想总是使用自己本地的事件来处理,可以在ko.applyBindings中加入如下代码:
ko.options.useOnlyNativeEvents = true;