随笔分类 - KnockoutJS
摘要：data-bind绑定语法 Knockout的声明性绑定系统提供了一种简洁而强大的方法来将数据链接到UI。 绑定到简单的数据属性或使用单个绑定通常是容易和明显的。 对于更复杂的绑定，它有助于更好地了解Knockout的绑定系统的行为和语法。 绑定语法 绑定包含两个项目，绑定名称和值，用冒号分隔。 这里是一个单一的简单绑定的示例： Today's message is: 元素可以包括多个绑定（相关...
阅读全文
摘要：目的 template绑定(模板绑定)使用渲染模板的结果填充关联的DOM元素。 模板是一种简单方便的方式来构建复杂的UI结构 。 下面介绍两种使用模板绑定的方法: 本地模板是支持foreach，if，with和其他控制流绑定的机制。 在内部，这些控制流绑定捕获元素中包含的HTML标记，并将其用作模板以针对任意数据项进行呈现。 此功能内置在Knockout中，不需要任何外部库。 基于字符串的模板...
阅读全文
摘要：selectedOptions绑定目的 selectedOptions绑定控制当前选择多选列表中的哪些元素。 这旨在与 参数 这应该是一个数组（或一个observable数组）。 KO设置元素的选定选项以匹配数组的内容。 任何先前的选择状态将被覆盖。 如果你的参数是一个observable数组，绑定将更新元素的选择每当数组改变（例如，通过push，pop或其他observable数组方法）...
阅读全文
摘要：目的 options绑定主要用于下拉列表中（即 示例2：多选列表 Choose some countries you would like to visit: 源码： Choose some countries you would like to visit: 示例3：任意JS对象的下拉列表 Your country: You have chosen...
阅读全文
摘要：textInput绑定目的 textInput绑定主要用于或者元素。他提供了DOM和viewmodel的双向更新。不同于value绑定，textinput绑定是实时更新的。 例如： Login name: Password: ViewModel: 源码： Login name: Password: ViewModel: 备注1：textInput绑定 VS value绑定 虽...
阅读全文
摘要：目的 value绑定主要用于DOM元素给视图模型赋值用的。通常用于 有很多时候，我们希望下拉列表中包含一个空白的或者没有包含在数据集合中的元素，比如choose one…，那么就可以使用valueAllowUnset:true来带到目的。如上述例子一样。 selectedCountry将保留Latvia，并将下拉列表中空白匹配给它。 备注3：绑定监控属性和非监控属性 如果你使用value绑...
阅读全文
摘要：submit绑定目的 submit绑定即为提交绑定，通常用于form元素。这种绑定方式会打断默认的提交至服务器的操作。转而提交到你设定好的提交绑定回调函数中。如果要打破这个默认规则，只需要在回调函数中返回true即可。 例如： ... form contents go here ... Submit 在回调函数中，你可以做很多事情，比如前端数据验证if ($(formEl...
阅读全文
摘要：目的 event绑定即为事件绑定，即当触发相关DOM事件的时候回调函数。例如keypress，mouseover或者mouseout等 例如： Mouse over me Details 源码： Mouse over me Details 如上述例子，当鼠标指针移入或者移出Mouse over me时，对于d...
阅读全文
摘要：目的 click绑定主要作用是用于DOM元素被点击时调用相关JS函数。最常见用于button、input、a元素。 例如： You've clicked timesClick me 源码： You've clicked times Click me 如上述例子，没点过button被点击时都会触发incrementClickCounter 回调函数，从而更新视图状态。...
阅读全文
摘要：本节目录： 一个例子 API 备注1：仅模板式的component 备注2：component虚拟绑定 备注3：传递标记到component绑定 内存管理 一个例子 First instance, without parameters Second instance, passing parameters UI源码： First instance, without paramet...
阅读全文
摘要：with绑定的目的 使用with绑定的格式为data-bind=”with:attribute”,使用with绑定会将其后所跟的属性看作一个新的上下文进行绑定。with绑定内部的所有元素将受到该上下文的约束。 当然，with绑定也可配合if或foreach绑定一起使用。 示例1 Latitude: , Longitude: 本例中，通过with直接绑定了coor...
阅读全文
摘要：if绑定目的 if绑定一般是格式是data-bind=if:attribute,if后所跟属性或表达式的值应为bool值(也可以是非bool值，当非空字符串时则为真)，if绑定的作用与visible绑定的作用类似。可控制DOM的显示与隐藏，不一样的地方是，if绑定是物理删除或添加DOM元素。 示例1 该例展示IF绑定的动态删除添加DOM： Display message Here is a m...
阅读全文
摘要：foreach绑定 foreach绑定主要用于循环展示监控数组属性中的每一个元素，一般用于table标签中 假设你有一个监控属性数组，每当您添加，删除或重新排序数组项时，绑定将有效地更新UI的DOM-插入或去除相关项目或重新排序现有的DOM元素，不影响任何其他的DOM元素。 当然，也可以配合其他控制流一起适用，例如if和with。 示例1：遍历监控属性数组 本例适用foreach绑定，在一个...
阅读全文
摘要：目录 本节将介绍六种文本绑定方式： visible绑定 text绑定 html绑定 css绑定 style绑定 attr绑定 可见文本绑定(visible) 使用visible绑定，来控制DOM元素的可见或隐藏 例子： You will see this message only when "shouldShowMessage" holds a true value. ...
阅读全文
摘要：计算监控属性构造参考 计算监控属性可使用以下形式进行构造： ko.computed( evaluator [, targetObject, options] ) - 这种形式是创建一个计算监控属性最常见的情况。 evaluator - 用于返回计算值的函数。 targetObject-如果给出定义的值this时KO调用回调函数。参见部分第三章 计算监控属性(1) 使用计算监控属性以获取更多信息...
阅读全文
摘要：Pure computed observables Pure computed observables是KO在3.2.0版本中推出的。她相对于之前的ComputedObservables有很多改进： 防止内存泄漏 减少计算开销 在PureComputed函数中，随着相关监控属性值变化的时候，在两种状态之间切换。 每当它没有 值变化的时候，它处于睡眠状态。当进入睡眠状态时，其配置的所有订阅...
阅读全文
摘要：KO是如何实现自动更新的 初学者可以掠过该篇，如果你是一个刨根问底的开发者，那本节将告诉你KO是如何实现依赖追踪和UI自动更新的。 其实很简单，KO的依赖追踪算法如下： 当你声明一个计算监控属性，KO立即调用其相关的函数来获取其初始值。 当相关函数正在运行，KO将建立一个订阅到相关监控属性（包括其他计算监控属性）并读取他们的值。订阅回调函数设置为订阅函数再次运行，循环的这个过程。 当有新的值，K...
阅读全文
摘要：可赋值的计算监控属性 可赋值的计算监控属性是非常专业的，大多数情况下一般用不到，初学者可以跳过这一节 通常情况下，计算监控属性一般情况下是只读的。我们可以通过使用自己的回调函数让计算监控属性变为可赋值状态。 您可以用自己的定制逻辑让计算监控属性可写。就像将空属性，可以使用一个模型对象的链接的语法进行赋值。例如，myViewModel.fullName('Joe Smith').age(50)...
阅读全文
摘要：计算监控属性(Computed Observables) 如果你有一个监控属性firstName，和另一个lastName，你要显示的全名？可以使用计算监控属性来实现-它依赖于一个或多个其他监控属性，每当这些依赖关系的监控属性改变时将会自动更新计算监控属性。 例如，下面的视图模型： function AppViewModel() { this.firstName = ko.observab...
阅读全文
摘要：监控属性数组 如果要对一个对象检测和响应变化，会使用监控属性。如果要对一个序列检测并监控变化，需要使用observableArray(监控属性数组)。这在你显示或编辑多个值，需要用户界面的部分反复出现和消失的项目并且具有添加和删除操作的情况下使用observableArray。 例如声明并赋值: var myObservableArray = ko.observableArray(); //...
阅读全文
浙公网安备 33010602011771号