knockoutjs2.0工作领域与形式四.docx

“hasfocus”具有约束力 目的 一个ViewModel属性hasfocus结合与DOM元素的焦点状态。 这是一个双向绑定，所以： 如果你的ViewModel属性设置为true或false ，相关的元素将成为重点或重点不突出。 如果用户手动集中，或unfocuses相关的元素，在ViewModel属性将被设置为true或false相应。 如果您正在构建复杂的形式，在编辑元素动态显示，这是非常有用的，你想控制用户应该开始打字，或回应插入符的位置。 小费 如果多个元素有hasfocus关联值设置为绑定true ，浏览器将焦点切换到为准元素其hasfocus约束力的一套， 最近 。 所以，你可以简单的写data-bind=hasfocus: true如果你想尽快使一个元素获得焦点，因为它是动态插入到文档中。 这不会阻止后移动到一个不同的元素的焦点。 例1：基础知识 这个例子只显示一条消息，如果TextBox当前具有焦点，并使用一个按钮来显示，你可以触发集中编程。 源代码：查看 Focus programmatically 焦点编程The textbox has focus TextBox的焦点源代码：查看模型 var viewModel = VAR的ViewModel = isSelected: ko.observable(false), isSelected：ko.observable（假）setIsSelected: function() this.isSelected(true) setIsSelected：this.isSelected（真实）函数（）; ;ko.applyBindings(viewModel); ko.applyBindings（ViewModel的）;例2：点击编辑 因为在两个方向（设置相关值重点或unfocuses元素;重点或unfocusing元素设置相关值） hasfocus结合的作品，它是一种方便的方式来切换“编辑”模式。 在这个例子中，UI显示一个的或 取决于模型的editing属性的元素。 Unfocusing 元素设置editing false false ，因此用户界面切换的“编辑”模式。 产品名称： Bert Bertington点击名称进行编辑;点击别处申请变更。 源代码：查看 Name:产品名称：   Click the name to edit it; click elsewhere to apply changes. 的名称编辑它。点击其他地方申请变更 源代码：查看模型 function PersonViewModel(name) 函数PersonViewModel（名称）/ Data / /数据 = ko.observable(name); = ko.observable（姓名）;this.editing = ko.observable(false); this.editing = ko.observable（假）;/ Behaviors / /行为this.edit = function() this.editing(true) this.edit =函数（）this.editing（TRUE） ko.applyBindings(new PersonViewModel(Bert Bertington); ko.applyBindings（新PersonViewModel（“伯特Bertington”的）;参数 主要技术参数 通过true （或一些价值评估为true），集中相关的元素。 否则，相关的元素，将散。 当用户手动重点或unfocuses元素，你的价值，将设置相应的true或false 。 如果您提供的价值观察， hasfocus绑定更新元素的焦点状态时，观察值的变化。 额外的参数 o 没有 依赖 没有，比核心淘汰赛库中的其他。 “检查”结合 目的 约束力链接的checked托运的形式控制-即一个复选框（ ）或一个单选按钮（ ） -与您的视图模型的属性。 当用户检查联营的形式控制，此更新您的视图模型的价值。 同样，当您在您的视图模型更新的价值，这支票或取消选中屏幕上的形式控制。 注：对于文本框，下拉列表，以及所有非托运的形式控制，读取和写入该元素的值，而不是value checked结合使用value绑定 。 与复选框的范例 Send me spam: var viewModel = wantsSpam: ko.observable(true) / Initially checked ; / . then later . viewModel.wantsSpam(false); / The checkbox becomes unchecked 例如添加绑定到一个数组复选框 Send me spam: Preferred flavors of spam: Cherry Almond Monosodium Glutamate var viewModel = wantsSpam: ko.observable(true), spamFlavors: ko.observableArray(cherry,almond) / Initially checks the Cherry and Almond checkboxes ; / . then later . viewModel.spamFlavors.push(msg); / Now additionally checks the Monosodium Glutamate checkbox 例如加入单选按钮 Send me spam: Preferred flavor of spam: Cherry Almond Monosodium Glutamate var viewModel = wantsSpam: ko.observable(true), spamFlavor: ko.observable(almond) / Initially selects only the Almond radio button ; / . then later . viewModel.spamFlavor(msg); / Now only Monosodium Glutamate is checked 参数 主要技术参数 正元素的选中状态设置，以符合您的参数值。 以往任何检查的状态将被覆盖。 的解释参数的方式取决于你绑定到什么类型的元素： o 对于复选框 ，正将设置参数值时，要检查的元素， true和未选中，当它是false的。 如果你给一个实际上不是布尔值，它将被解释松散。 这意味着，所有非零数字和非null对象和非空字符串将被解释为true ，为零，而null ， undefined ，空字符串将被解释为false 。 当用户选中或取消选中复选框，正将你的模型属性设置为true或false相应。 如果你的参数解析到一个array ，特别考虑。 在这种情况下，正将设置要检查的元素，如果数组中的值匹配的项目， 选中的，如果它不包含在数组中。 当用户选中或取消选中复选框，正将添加或从数组中删除相应的价值。 o 单选按钮 ，正将设置进行检查 ，当且仅当参数值等于该单选按钮节点的元素的value属性。 所以，你的参数值应该是一个字符串。 在前面的例子，用单选按钮value=almond的检查，只有当视图模型的spamFlavor财产是平等的almond 。 当单选按钮被选中的用户的变化，正将设置你的模型的属性等于value选定的单选按钮的属性。 在前面的例子中，点击单选按钮value=cherry将设置viewModel.spamFlavor是cherry 。 当然，这是最有用的，当你有多个单选按钮绑定到一个单一的模型属性的元素。 为了确保只有这些单选按钮之一，可以