摘要: 无论何时使用组件绑定或自定义元素注入组件,Knockout都将使用一个或多个组件装载器获取该组件的模板和视图模型。 组件加载器的任务是异步提供任何给定组件名称的模板/视图模型对。 本节目录 默认组件加载器 组件加载器实用函数 实现自定义组件加载器 可以实现的功能 getConfig(name, callback) loadComponent(name, componentConfig, ca... 阅读全文
posted @ 2016-10-18 16:22 SmallProgram 阅读(1696) 评论(0) 推荐(1) 编辑
摘要: 自定义元素提供了一种将组件注入视图的方便方法。 本节目录 介绍 例子 传递参数 父组件和子组件之间的通信 传递监控属性的表达式 将标记传递到组件中 控制自定义元素标记名称 注册自定义元素 备注1:将自定义元素与常规绑定相结合 备注2:自定义元素不能自行关闭 备注3:自定义元素和Internet Explorer 6到8 高级应用:访问$ raw参数 介绍 自定义元素是组件绑... 阅读全文
posted @ 2016-10-18 15:48 SmallProgram 阅读(1410) 评论(0) 推荐(1) 编辑
摘要: 组件绑定将指定的组件注入到元素中,并且可选地将参数传递给它。 本节目录 一个例子 API 组件生命周期 备注1:仅限模板组件 备注2:使用没有容器元素的组件 备注3:将标记传递给组件 处置和内存管理 一个例子 First instance, without parameters Second instance, passing parameters UI源码: First in... 阅读全文
posted @ 2016-10-18 15:11 SmallProgram 阅读(1820) 评论(0) 推荐(1) 编辑
摘要: 要使Knockout能够加载和实例化组件,必须使用ko.components.register注册它们,从而提供如此处所述的配置。 注意:作为替代,可以实现一个自定义组件加载器(自定义加载器下一节介绍),通过自己的约定获取组件,而不是显式配置。 本节目录 将组件注册为viewmodel/template 指定视图模型 构造函数 共享对象实例 一个createViewModel工厂函数 一个A... 阅读全文
posted @ 2016-10-18 11:03 SmallProgram 阅读(1750) 评论(0) 推荐(0) 编辑
摘要: Components (组件)是一个强大的,干净的方式组织您的UI代码,可重复使用的块。 : …可以表示单独的控件/窗口小部件或应用程序的整个部分 …包含自己的视图,通常(但可选)自己的视图模型 …可以预加载或通过AMD或其他模块系统异步加载(按需) …可以接收参数,并可选地将更改写回到它们或调用回调 …可以一起组成(嵌套)或继承自其他组件 …可以轻松地打包,以便跨项目进行重用 …... 阅读全文
posted @ 2016-10-17 10:56 SmallProgram 阅读(2312) 评论(1) 推荐(3) 编辑
摘要: 注意:这是一种高级技术,通常仅在创建可重用绑定或扩展语法的库时使用。 这不是你通常需要做的时候使用Knockout构建应用程序。 从Knockout 3.0开始,开发人员可以通过提供在绑定过程中重写DOM节点和绑定字符串的回调来定义自定义语法。 预处理绑定字符串 您可以通过为特定绑定处理程序(例如click,visible或任何自定义绑定处理程序)提供绑定预处理程序,来挂钩Knockout的逻辑来... 阅读全文
posted @ 2016-10-17 10:01 SmallProgram 阅读(1468) 评论(0) 推荐(2) 编辑
摘要: 在典型的Knockout应用程序中,DOM元素是动态添加和删除的,例如使用模板绑定或通过控制流绑定(if,ifnot,with和foreach)。 当创建自定义绑定时,通常需要添加清除逻辑,当Knockout删除与您的自定义绑定相关联的元素时,该逻辑运行。 在处理元素时注册回调 要注册要删除节点时要运行的函数,可以调用ko.utils.domNodeDisposal.addDisposeCallb... 阅读全文
posted @ 2016-10-17 09:48 SmallProgram 阅读(1256) 评论(0) 推荐(0) 编辑
摘要: 注意:这是一种高级技术,通常仅在创建可重用绑定的库时使用。 这不是你通常需要做的时候使用Knockout构建应用程序。 Knockout的控制流绑定(例如,if和foreach)不仅可以应用于常规DOM元素,而且可以应用于由基于特殊注释的语法定义的“虚拟”DOM元素。 例如: My heading 自定义绑定也可以与虚拟元素一起使用,但要启用此功能... 阅读全文
posted @ 2016-10-17 09:41 SmallProgram 阅读(1656) 评论(0) 推荐(0) 编辑
摘要: 注意:这是一种高级技术,通常仅在创建可重用绑定的库时使用。 默认情况下,绑定仅影响它们应用到的元素。 但是如果你想影响所有的后代元素呢? 为此,只需从绑定的init函数中返回{controlsDescendantBindings:true}即可。 示例1:控制是否应用后代绑定 对于一个非常简单的例子,这里有一个名为allowBindings的自定义绑定,允许后代绑定仅当它的值为true时才应用... 阅读全文
posted @ 2016-10-17 09:20 SmallProgram 阅读(1398) 评论(0) 推荐(2) 编辑
摘要: 您不仅限于使用内置的绑定,如click,value绑定等,您可以创建自己的绑定。 这是如何控制视图模型如何与DOM元素进行交互,并且为您提供了大量的灵活性,以便于以复用的方式封装复杂的行为。 注册绑定 要注册绑定,请将其作为ko.bindingHandlers的子属性添加,比如如下例子: ko.bindingHandlers.yourBindingName = { init: functi... 阅读全文
posted @ 2016-10-14 10:04 SmallProgram 阅读(2299) 评论(0) 推荐(0) 编辑
摘要: data-bind绑定语法 Knockout的声明性绑定系统提供了一种简洁而强大的方法来将数据链接到UI。 绑定到简单的数据属性或使用单个绑定通常是容易和明显的。 对于更复杂的绑定,它有助于更好地了解Knockout的绑定系统的行为和语法。 绑定语法 绑定包含两个项目,绑定名称和值,用冒号分隔。 这里是一个单一的简单绑定的示例: Today's message is: 元素可以包括多个绑定(相关... 阅读全文
posted @ 2016-10-13 15:26 SmallProgram 阅读(2168) 评论(0) 推荐(1) 编辑
摘要: 目的 template绑定(模板绑定)使用渲染模板的结果填充关联的DOM元素。 模板是一种简单方便的方式来构建复杂的UI结构 。 下面介绍两种使用模板绑定的方法: 本地模板是支持foreach,if,with和其他控制流绑定的机制。 在内部,这些控制流绑定捕获元素中包含的HTML标记,并将其用作模板以针对任意数据项进行呈现。 此功能内置在Knockout中,不需要任何外部库。 基于字符串的模板... 阅读全文
posted @ 2016-10-12 16:46 SmallProgram 阅读(1879) 评论(0) 推荐(2) 编辑
摘要: selectedOptions绑定目的 selectedOptions绑定控制当前选择多选列表中的哪些元素。 这旨在与 参数 这应该是一个数组(或一个observable数组)。 KO设置元素的选定选项以匹配数组的内容。 任何先前的选择状态将被覆盖。 如果你的参数是一个observable数组,绑定将更新元素的选择每当数组改变(例如,通过push,pop或其他observable数组方法)... 阅读全文
posted @ 2016-10-12 11:06 SmallProgram 阅读(1881) 评论(0) 推荐(0) 编辑
摘要: 目的 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... 阅读全文
posted @ 2016-10-11 15:47 SmallProgram 阅读(2164) 评论(2) 推荐(1) 编辑
摘要: textInput绑定目的 textInput绑定主要用于或者元素。他提供了DOM和viewmodel的双向更新。不同于value绑定,textinput绑定是实时更新的。 例如: Login name: Password: ViewModel: 源码: Login name: Password: ViewModel: 备注1:textInput绑定 VS value绑定 虽... 阅读全文
posted @ 2016-10-11 10:35 SmallProgram 阅读(3297) 评论(0) 推荐(1) 编辑
摘要: 目的 value绑定主要用于DOM元素给视图模型赋值用的。通常用于 有很多时候,我们希望下拉列表中包含一个空白的或者没有包含在数据集合中的元素,比如choose one…,那么就可以使用valueAllowUnset:true来带到目的。如上述例子一样。 selectedCountry将保留Latvia,并将下拉列表中空白匹配给它。 备注3:绑定监控属性和非监控属性 如果你使用value绑... 阅读全文
posted @ 2016-10-10 10:31 SmallProgram 阅读(2321) 评论(0) 推荐(2) 编辑
摘要: submit绑定目的 submit绑定即为提交绑定,通常用于form元素。这种绑定方式会打断默认的提交至服务器的操作。转而提交到你设定好的提交绑定回调函数中。如果要打破这个默认规则,只需要在回调函数中返回true即可。 例如: ... form contents go here ... Submit 在回调函数中,你可以做很多事情,比如前端数据验证if ($(formEl... 阅读全文
posted @ 2016-10-09 15:29 SmallProgram 阅读(1620) 评论(1) 推荐(0) 编辑
摘要: 目的 event绑定即为事件绑定,即当触发相关DOM事件的时候回调函数。例如keypress,mouseover或者mouseout等 例如: Mouse over me Details 源码: Mouse over me Details 如上述例子,当鼠标指针移入或者移出Mouse over me时,对于d... 阅读全文
posted @ 2016-10-09 14:52 SmallProgram 阅读(2135) 评论(0) 推荐(0) 编辑
摘要: 目的 click绑定主要作用是用于DOM元素被点击时调用相关JS函数。最常见用于button、input、a元素。 例如: You've clicked timesClick me 源码: You've clicked times Click me 如上述例子,没点过button被点击时都会触发incrementClickCounter 回调函数,从而更新视图状态。... 阅读全文
posted @ 2016-10-09 10:11 SmallProgram 阅读(2986) 评论(4) 推荐(0) 编辑
摘要: 本节目录: 一个例子 API 备注1:仅模板式的component 备注2:component虚拟绑定 备注3:传递标记到component绑定 内存管理 一个例子 First instance, without parameters Second instance, passing parameters UI源码: First instance, without paramet... 阅读全文
posted @ 2016-10-06 10:55 SmallProgram 阅读(1972) 评论(0) 推荐(0) 编辑