konckoutJS

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)



可见?不可见?

foreach绑定

foreach绑定主要用于循环展示监控数组属性中的每一个元素,一般用于table标签中;

假设你有一个监控属性数组,每当您添加,删除或重新排序数组项时,绑定将有效地更新UI的DOM-插入或去除相关项目或重新排序现有的DOM元素,不影响任何其他的DOM元素。

当然,也可以配合其他控制流一起适用,例如ifwith

遍历监控属性数组:

clilck绑定



You've clicked times

foreach 加 click 绑定:




  • Remove

备注:与Jquery互动

如果存在Jquery的click事件,KO将会去调用Jquery的click事件,如果你想总是使用自己本地的事件来处理,可以在ko.applyBindings中加入如下代码:


ko.options.useOnlyNativeEvents = true;

你可能感兴趣的:(konckoutJS)