2. 监控 1.通过监控创建视图模型 1. 监控 Knockout是基于以下三个核心特性: 监控和依赖跟踪 声明式绑定 模板 在本节,你将第一次了解这三个特性,在这之前,我们先来了解以下MVVM模式和视图模型的概念. 2. MVVM和视图模型 Model-View-View Model (MVVM)是一种构建用户界面的设计模式.它描述了如何将存在复杂性的UI简单地分成三个部分: 模型:用于你的应用程序存储数据.数据被表现为对象在你的业务逻辑里面进行操作(比如,银行账户可以进行转账业务)而且是和任…

6. 显式订阅监控 你通常不需要手动设置订阅,所以初学者应该跳过这一节. 对于高级用户,如果你想注册自己的订阅来监控通知变化,你可以使用 subscribe函数,比如: myViewModel.personName.subscribe(function(newValue) { alert("The person's new name is " + newValue); }); KO内部很多部分都是由subscribe来实现.大多数情况下你不需要使用它,因为内置绑定和模板系统要管理订阅.…

2.可写的计算监控 初学者可能想要跳过本节 - 可写的计算监控是相当高级的部分,在大多数情况下不是必需的. 通常,计算监控是一个通过其他监控值计算出的值,因此是只读的. 令人惊讶的是,可以使计算监控值变得可写. 你只需要提供自己的回调函数,输入一些正确的值. 你可以使用一个可写的计算监控,就像一个常规的监控对象,用你自己的逻辑来定义读写.就像一个监控对象一样,您可以使用链接语法将值写入模型对象上的对过监控对象或计算监控对象. 例如, myViewModel.fullName('Joe Smith…

4.纯计算属性 纯计算监控在KO 3.2.0中开始引入,比大多数应用程序使计算监控有更大的性能提升和内存优化.这是因为在自身没有订阅的时候不会保持订阅状态.特性如下 阻止内存泄露 - 避免在应用程序里计算监控不再被引用但是依赖仍然存在. 减少计算开销 - 当值不再被监控不会重新计算计算监控的值. 纯计算监控会在两个状态之间自动切换,基于它是否改变了订阅者. 当订阅者没有发生改变,它会休眠.当进入休眠状态,它释放所有自身依赖的订阅.在这种状态下,它不会订阅访问求值函数里面的的监控对象(尽管它会继续…

2. 控制流 1. foreach绑定 目的 foreach绑定会遍历一个数组,为每个数组项生成重复的元素标记结构并做关联.这在渲染列表或表格的时候特别有用. 假设你的数组是一个监控数组,之后无论你进行添加,移除还是重新排序,对应的UI结构也会发生相应变化 -- 插入或移除标记结构,或者重排已存在的DOM元素.这不会影响其他的DOM元素,这远比数组发生改变后重新渲染生成foreach输出结构快多了. 当然,你可以嵌套任意数量的foreach绑定,或者其他的控制流绑定,比如if绑定和with绑定.…

5. style绑定 目的 style绑定用来给关联的DOM元素添加或移除一个或多个样式值.在如下情况很有用,比如,当某些值为负时,高亮显示,或者设置容器元素的宽度来匹配数值的改变. (注意:如果你不想应用一个显示的样式值而想用分配一个CSS类样式,请参考css绑定.) 例子 <div data-bind="style: { color: currentProfit() < 0 ? 'red' : 'black' }"> Profit Information <…

4. css绑定 目的 css绑定可以给关联的DOM元素添加或移除一个或多个CSS类.该绑定很有用,比如,当一些值为负数时高亮这些值为红色. (注意:如果你不想使用一个CSS类选择器来附加样式而想直接给style属性赋值,请看style绑定.) 静态类样式例子 <div data-bind="css: { profitWarning: currentProfit() < 0 }"> Profit Information </div> <script…

6. attr绑定 目的 attr绑定可以给关联DOM元素的任何属性赋值.这个绑定很棒,比如,当你想要设置通过视图模型给元素的title属性.img标签的src属性或超链接的href值,当视图模型对应的属性值改变时,绑定的属性值同样会自动改变. 例子 <a data-bind="attr: { href: url, title: details }"> Report </a> <script type="text/javascript"…

3. html绑定 目的 html绑定会使关联的DOM元素显示你参数指定的html内容. 当你的视图模型里面的值是HTML标记字符串,而你想要呈现它,这时候用html绑定特别合适. 例子 <div data-bind="html: details"></div> <script type="text/javascript"> var viewModel = { details: ko.observable() // Initial…

3. 计算监控 1.使用计算监控 如果你有一个监控的属性firstName和另一个lastName,但你想显示全名怎么办? 这就是引入计算监控的原因-这是依赖于一个或多个其他的observables函数,无论这些依赖对象什么时候发生改变,它都将自动更新. 例如,下面给了一个view model 类, function AppViewModel() { this.firstName = ko.observable('Bob'); this.lastName = ko.observable('Smi…