knockoutjs2.0观测.docxVIP

观测 淘汰赛是围绕三个核心功能： 观测和依赖跟踪 声明绑定 模板 此页面上，你会了解，这三个第一。 但在此之前，让我解释一下MVVM模式和视图模型的概念。 的MVVM和查看模型 模型-视图-视图模型（MVVM的）是一个用于构建用户界面设计模式。 它描述了如何可以保持一个潜在的复杂的用户界面简单分裂它分为三个部分： A 型 ：你的应用程序的数据存储。 这个数据代表您的业务领域中的对象和操作（例如，可以进行转帐的银行帐户），是独立于任何UI。 使用正时，你通常会做一些服务器端代码的Ajax调用此存储模型数据读写。 视图模型 ：纯代码代表了一个用户界面上的数据和操作。 例如，如果你执行一个列表编辑器，视图模型将一个对象的项目清单，并揭露的方法来添加和删除项目。 请注意，这不是在UI本身：它不具有任何按钮或显示样式的概念。 它不是持久化的数据模型 - 它拥有的用户正在使用的未保存的数据。 使用时十五分，您的视图模型是纯JavaScript对象有没有HTML知识。 保持在这样的视图模型抽象，让它保持简单，使您可以管理更复杂的行为，不迷路。 一个观点 ：一个可见的，交互式UI代表视图模式状态。 视图模型状态变化时，它从视图模型显示的信息，发送命令到视图模型（例如，当用户点击按钮），并更新。 使用时十五分，你的看法仅仅是你的声明绑定的HTML文件，将它连结到视图模型。 另外，您可以使用模板生成HTML使用数据从您的视图模型。 要创建视图模型与正，刚刚宣布任何JavaScript对象。 例如， var myViewModel = { personName: Bob, personAge: 123 };然后，您可以创建了这个视图模型很简单，使用声明的绑定。 例如，下面的标记显示personName价值： The name is span data-bind=text: personName/span激活淘汰赛 data-bind属性是不是本地的HTML，但它是完全OK（这是严格符合HTML 5中，并导致与HTML 4没有问题，即使验证会指出，这是一个无法识别的属性）。 但是由于浏览器不知道这意味着什么，你需要激活淘汰赛，以使其生效。 要激活淘汰赛，添加以下行到script script块： ko.applyBindings(myViewModel);你可以在你的HTML文档底部的脚本块，你可以把它的顶部和包裹在诸如DOM就绪处理程序的内容/translate_c?hl=zh-CNie=UTF8prev=_trurl=.hksl=entl=zh-CNu=/jQuery/usg=ALkJrhg6Dq3VvP2AwqJNTGBpE-i2D9FjrgjQuery的$函数 。 就是它！ 现在，将显示您的看法，如果你写下面的HTML： The name is spanBob/span你想知道的情况下的参数ko.applyBindings做什么， 第一个参数表示视图模型对象，你想用它激活的声明绑定 或者，您可以通过第二个参数来定义文档的一部分，你要搜索的data-bind属性。 例如， ko.applyBindings(myViewModel, document.getElementById(someElementId)) 这就限制了元素的ID激活someElementId及其后代，这是有用的，如果你想有多个视图模型和关联每一个页面的不同区域。 很简单，真的。 观测 OK，你已经看到了如何创建一个基本的视图模型，以及如何显示其使用绑定的属性之一。 但十分关键的好处之一是，它时会自动更新你的UI视图模型的变化。 正如何可以知道，当您的视图模型变化的部分？ 答：您需要申报作为观测模型的性质，因为这些是特殊的JavaScript对象的变化，可以通知用户，并能自动检测依赖关系。 例如，重写前面的视图模型对象如下： var myViewModel = { personName: ko.observable(Bob), personAge: ko.observable(123) };您不必更改视图-相同的data-bind语法将继续工作。 所不同的是，它现在能够??检测变化，它时，它会自动更新视图。 阅读和写作观测 并非所有浏览器支持JavaScript getter和setter（*咳嗽*即*咳*），所以兼容性， ko.observable对象的实际功能 。 要读观察到的电流值，只需调用不带参数的观察。 在这个例子中中， myViewModel.personName()将返回Bob ，并myViewModel.personAge()将返回123 。 写一个新的观察值，调用的观察，并作为一个参数传递的新值。 例如，调用myViewModel.personName(Mar