data-bind绑定语法 Knockout的声明性绑定系统提供了一种简洁而强大的方法来将数据链接到UI. 绑定到简单的数据属性或使用单个绑定通常是容易和明显的. 对于更复杂的绑定,它有助于更好地了解Knockout的绑定系统的行为和语法. 绑定语法 绑定包含两个项目,绑定名称和值,用冒号分隔. 这里是一个单一的简单绑定的示例: Today's message is: <span data-bind="text: myMessage"></span> 元素可以包…

目的 options绑定主要用于下拉列表中(即<select>元素)或多选列表(例如,<select size='6'>).此绑定不能与除<select>元素之外的任何其他元素一起使用. 其值应该是一个数组(或监控属性数组). 注意:对于多选列表,设置该选项被选中,或读取其中被选中的选项,需要使用的selectedOptions绑定.对于单选择列表,可以结合value绑定读取和写入选定的选项的.. 示例1:下拉列表 Destination country: var vi…

目的 template绑定(模板绑定)使用渲染模板的结果填充关联的DOM元素. 模板是一种简单方便的方式来构建复杂的UI结构 . 下面介绍两种使用模板绑定的方法: 本地模板是支持foreach,if,with和其他控制流绑定的机制. 在内部,这些控制流绑定捕获元素中包含的HTML标记,并将其用作模板以针对任意数据项进行呈现. 此功能内置在Knockout中,不需要任何外部库. 基于字符串的模板是一种将Knockout连接到第三方模板引擎的方法. Knockout会将您的模型值传递给外部模板引擎,…

本节目录: 一个例子 API 备注1:仅模板式的component 备注2:component虚拟绑定 备注3:传递标记到component绑定 内存管理 一个例子 First instance, without parameters Second instance, passing parameters ko.components.register('message-editor', { viewModel: function(params) { this.text = ko.observab…

目录 本节将介绍六种文本绑定方式: visible绑定 text绑定 html绑定 css绑定 style绑定 attr绑定 可见文本绑定(visible) 使用visible绑定,来控制DOM元素的可见或隐藏 例子: <div data-bind="visible: shouldShowMessage"> You will see this message only when "shouldShowMessage" holds a true value…

foreach绑定 foreach绑定主要用于循环展示监控数组属性中的每一个元素,一般用于table标签中 假设你有一个监控属性数组,每当您添加,删除或重新排序数组项时,绑定将有效地更新UI的DOM-插入或去除相关项目或重新排序现有的DOM元素,不影响任何其他的DOM元素. 当然,也可以配合其他控制流一起适用,例如if和with. 示例1:遍历监控属性数组 本例适用foreach绑定,在一个table标签中循环显示监控属性数组的内容 <table> <thead> <tr&g…

if绑定目的 if绑定一般是格式是data-bind=if:attribute,if后所跟属性或表达式的值应为bool值(也可以是非bool值,当非空字符串时则为真),if绑定的作用与visible绑定的作用类似.可控制DOM的显示与隐藏,不一样的地方是,if绑定是物理删除或添加DOM元素. 示例1 该例展示IF绑定的动态删除添加DOM: Display message Here is a message. Astonishing. ko.applyBindings({ displayMessa…

with绑定的目的 使用with绑定的格式为data-bind="with:attribute",使用with绑定会将其后所跟的属性看作一个新的上下文进行绑定.with绑定内部的所有元素将受到该上下文的约束. 当然,with绑定也可配合if或foreach绑定一起使用. 示例1 <h1 data-bind="text: city"> </h1> <p data-bind="with: coords"> Lati…

目的 click绑定主要作用是用于DOM元素被点击时调用相关JS函数.最常见用于button.input.a元素. 例如: You've clicked timesClick me var viewModel = { numberOfClicks : ko.observable(0), incrementClickCounter : function() { var previousCount = this.numberOfClicks(); this.numberOfClicks(previo…

目的 event绑定即为事件绑定,即当触发相关DOM事件的时候回调函数.例如keypress,mouseover或者mouseout等 例如: Mouse over me Details var viewModel = { detailsEnabled: ko.observable(false), enableDetails: function() { this.detailsEnabled(true); }, disableDetails: function() { this.detailsE…