KnockoutJS 3.X API 第六章组件(4) 自定义元素

自定义元素提供了一种将组件注入视图的方便方法. 本节目录介绍例子传递参数父组件和子组件之间的通信传递监控属性的表达式将标记传递到组件中控制自定义元素标记名称注册自定义元素备注1:将自定义元素与常规绑定相结合备注2:自定义元素不能自行关闭备注3:自定义元素和Internet Explorer 6到8 高级应用:访问$ raw参数介绍自定义元素是组件绑定的语法替代(实际上,自定义元素使用后台的组件绑定).例如,一个繁琐写法的示范: <div data-bind='compo…

KnockoutJS 3.X API 第六章组件(5) 高级应用组件加载器

无论何时使用组件绑定或自定义元素注入组件,Knockout都将使用一个或多个组件装载器获取该组件的模板和视图模型. 组件加载器的任务是异步提供任何给定组件名称的模板/视图模型对. 本节目录默认组件加载器组件加载器实用函数实现自定义组件加载器可以实现的功能 getConfig(name, callback) loadComponent(name, componentConfig, callback) loadTemplate(name, templateConfig, callback)…

KnockoutJS 3.X API 第六章组件(3) 组件绑定

组件绑定将指定的组件注入到元素中,并且可选地将参数传递给它. 本节目录一个例子 API 组件生命周期备注1:仅限模板组件备注2:使用没有容器元素的组件备注3:将标记传递给组件处置和内存管理一个例子 First instance, without parameters Second instance, passing parameters ko.components.register('message-editor', { viewModel: function(params) { t…

KnockoutJS 3.X API 第六章组件(2) 组件注册

要使Knockout能够加载和实例化组件,必须使用ko.components.register注册它们,从而提供如此处所述的配置. 注意:作为替代,可以实现一个自定义组件加载器(自定义加载器下一节介绍),通过自己的约定获取组件,而不是显式配置. 本节目录将组件注册为viewmodel/template 指定视图模型构造函数共享对象实例一个createViewModel工厂函数一个AMD模块,其值描述一个viewmodel 指定模板现有元素ID 现有元素实例一串标记 DOM节点数组…

KnockoutJS 3.X API 第六章组件(1) 组件和自定义元素 - 概述

Components (组件)是一个强大的,干净的方式组织您的UI代码,可重复使用的块. : -可以表示单独的控件/窗口小部件或应用程序的整个部分 -包含自己的视图,通常(但可选)自己的视图模型 -可以预加载或通过AMD或其他模块系统异步加载(按需) -可以接收参数,并可选地将更改写回到它们或调用回调 -可以一起组成(嵌套)或继承自其他组件 -可以轻松地打包,以便跨项目进行重用 -让您定义自己的约定/逻辑进行配置和加载此模式有利于大型应用程序,因为它通过明确的组织和封装简化了开发,并通过根据需…

KnockoutJS 3.X API 第四章数据绑定(5) 控制流component绑定

本节目录: 一个例子 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…

第六章组件 67 使用ref获取DOM元素和组件引用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" cont…

KnockoutJS 3.X API 第七章其他技术(8) 异步错误处理

注意:本文档适用于Knockout 3.4.0及更高版本. ko.onError Knockout包装内部异步调用,并在抛出原始错误之前查找可选的ko.onError回调以执行(如果遇到异常). 这使您有机会运行自定义逻辑,例如将错误传递到日志记录模块. 此外,由于原始调用被包装在try / catch中,传递给ko.onError的错误包含一个堆栈属性,在使用window.onerror处理错误时,这在许多浏览器中不是真的. 此功能适用于以下上下文中的错误: 作为文本输入和值绑定的一部分进行的…

KnockoutJS 3.X API 第七章其他技术(7) 微任务

注意:本文档适用于Knockout 3.4.0及更高版本. Knockout的微任务队列 Knockout的微任务队列支持调度任务尽可能快地运行,同时仍然是异步的,努力安排它们在发生I / O,回流或重绘之前发生. 它在内部用于Knockout组件以维护异步行为,以及用于安排可观察量的延迟更新. ko.tasks.schedule(function () { // ... }); 这将把提供的回调函数添加到微任务队列. Knockout包括快速任务队列,以FIFO顺序运行任务,直到队列为空. 当…

KnockoutJS 3.X API 第七章其他技术(4) 速率限制

注意:这个速率限制API是在Knockout 3.1.0中添加的. 通常,更改的observable立即通知其订户,以便依赖于observable的任何计算的observable或绑定都会同步更新. 但是,rateLimit扩展器会导致observable在指定的时间段内抑制和延迟更改通知. 因此,速率限制的observable异步更新依赖关系. 速率限制扩展器可以应用于任何类型的可观察量,包括可观察数组和计算可观察量. 速率限制的主要用例是: 使事情在一定延迟后作出反应将多个更改合并到单个更…

KnockoutJS 3.X API 第三章计算监控属性(1) 使用计算监控属性

计算监控属性(Computed Observables) 如果你有一个监控属性firstName,和另一个lastName,你要显示的全名?可以使用计算监控属性来实现-它依赖于一个或多个其他监控属性,每当这些依赖关系的监控属性改变时将会自动更新计算监控属性. 例如,下面的视图模型: function AppViewModel() { this.firstName = ko.observable('Bob'); this.lastName = ko.observable('Smith'); } 可…

KnockoutJS 3.X API 第三章计算监控属性(3) KO如何实现依赖追踪

KO是如何实现自动更新的初学者可以掠过该篇,如果你是一个刨根问底的开发者,那本节将告诉你KO是如何实现依赖追踪和UI自动更新的. 其实很简单,KO的依赖追踪算法如下: 当你声明一个计算监控属性,KO立即调用其相关的函数来获取其初始值. 当相关函数正在运行,KO将建立一个订阅到相关监控属性(包括其他计算监控属性)并读取他们的值.订阅回调函数设置为订阅函数再次运行,循环的这个过程. 当有新的值,KO会通知你的计算监控属性将值反馈给用户. 采用PEEK控制依赖 Knockout的自动依赖跟踪通常不是…

KnockoutJS 3.X API 第三章计算监控属性(5) 参考手册

计算监控属性构造参考计算监控属性可使用以下形式进行构造: ko.computed( evaluator [, targetObject, options] ) - 这种形式是创建一个计算监控属性最常见的情况. evaluator - 用于返回计算值的函数. targetObject-如果给出定义的值this时KO调用回调函数.参见部分第三章计算监控属性(1) 使用计算监控属性以获取更多信息. options - 计算监控属性的其他属性的对象.请参见下面的完整列表. ko.computed(…

KnockoutJS 3.X API 第四章表单绑定(11) options绑定

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

KnockoutJS 3.X API 第四章(13) template绑定

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

KnockoutJS 3.X API 第四章(14) 绑定语法细节

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

KnockoutJS 3.X API 第五章高级应用(3) 虚拟元素绑定

注意:这是一种高级技术,通常仅在创建可重用绑定的库时使用. 这不是你通常需要做的时候使用Knockout构建应用程序. Knockout的控制流绑定(例如,if和foreach)不仅可以应用于常规DOM元素,而且可以应用于由基于特殊注释的语法定义的"虚拟"DOM元素. 例如: <ul> <li class="heading">My heading</li>  <…

KnockoutJS 3.X API 第五章高级应用(5) 使用预处理扩展Knockout绑定语法

注意:这是一种高级技术,通常仅在创建可重用绑定或扩展语法的库时使用. 这不是你通常需要做的时候使用Knockout构建应用程序. 从Knockout 3.0开始,开发人员可以通过提供在绑定过程中重写DOM节点和绑定字符串的回调来定义自定义语法. 预处理绑定字符串您可以通过为特定绑定处理程序(例如click,visible或任何自定义绑定处理程序)提供绑定预处理程序,来挂钩Knockout的逻辑来解释数据绑定属性. 为此,将预处理函数附加到绑定处理程序: ko.bindingHandlers.y…

第六章组件 63 组件传值-父组件向子组件传值和data与props的区别

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" cont…

第六章组件 60 组件切换-应用切换动画和mode方式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" cont…

第六章组件 59 组件切换-使用Vue提供的component元素实现组件切换

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" cont…

第六章组件 58 组件切换-使用v-if和v-else结合flag进行切换

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" cont…

第六章组件 56 组件-组件中的data

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" cont…

第六章组件 55 组件-使用components定义私有组件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" cont…

KnockoutJS 3.X API 第七章其他技术(6) 使用“fn”添加自定义函数

有时,您可能会通过向Knockout的核心值类型添加新功能来寻找机会来简化您的代码. 您可以在以下任何类型中定义自定义函数: 因为继承,如果你附加一个函数到ko.subscribable,它将可用于所有其他的. 如果你附加一个函数到ko.observable,它将被ko.observableArray继承而不是ko.computed继承. 要附加自定义函数,请将其添加到以下可扩展性点之一: ko.subscribable.fn ko.observable.fn ko.observableArra…

KnockoutJS 3.X API 第七章其他技术(5) 使用其他事件处理程序

在大多数情况下,数据绑定属性提供了一种干净和简洁的方式来绑定到视图模型. 然而,事件处理是一个常常会导致详细数据绑定属性的领域,因为匿名函数通常是传递参数的推荐技术. 例如: <a href="#" data-bind="click: function() { viewModel.items.remove($data); }"> remove </a> 作为替代,Knockout提供了两个帮助函数,它们允许您标识与DOM元素关联的数据: ko…

KnockoutJS 3.X API 第七章其他技术(3) 延迟更新

.example { display: inline-block; padding: 1em; margin-right: 2em; background: #F6F6EF; } 注意:本文档适用于Knockout 3.4.0及更高版本. 对于先前版本,"延迟更新"插件提供类似的支持. 在复杂的应用程序中,由于具有多个交织的依赖关系,更新单个observable可能会触发计算的observable,手动订阅和UI绑定更新的级联. 如果将不必要的中间值推送到视图或产生额外的计算的可观察评…

KnockoutJS 3.X API 第七章其他技术(2) 使用扩展器来增加可观察量(监控属性)

Knockout observables提供了支持读取/写入值并在值改变时通知订阅者所需的基本功能. 但在某些情况下,您可能希望向可观察者添加其他功能. 这可能包括通过在可观察者前面放置一个可写的计算可观察符来向可观察或截取写入添加额外的属性. 敲除扩展器提供了一种简单和灵活的方式来对可观察者进行这种类型的扩充. 如何创建扩展器创建扩展器涉及向ko.extenders对象添加一个函数. 函数接受observable本身作为第一个参数和第二个参数中的任何选项. 然后它可以返回observable…

KnockoutJS 3.X API 第七章其他技术(1) 加载和保存JSON数据

Knockout允许您实现复杂的客户端交互性,但几乎所有Web应用程序还需要与服务器交换数据,或至少将本地存储的数据序列化. 最方便的交换或存储数据的方式是JSON格式 - 大多数Ajax应用程序今天使用的格式. 加载或保存数据 Knockout不强制您使用任何一种特殊技术来加载或保存数据. 您可以使用任何适合您所选择的服务器端技术的机制. 最常用的机制是jQuery的Ajax方法,例如getJSON,post和ajax. 您可以从服务器获取数据: $.getJSON("/some/url&qu…

KnockoutJS 3.X API 第三章计算监控属性(2) 可赋值的计算监控属性

.liveexample{ padding: 1em; background-color: #eeeedd; border: 1px solid #ccc; max-width: 655px; font-size:18px; 可赋值的计算监控属性可赋值的计算监控属性是非常专业的,大多数情况下一般用不到,初学者可以跳过这一节通常情况下,计算监控属性一般情况下是只读的.我们可以通过使用自己的回调函数让计算监控属性变为可赋值状态. 您可以用自己的定制逻辑让计算监控属性可写.就像将空属性,可以使用一…

【KnockoutJS 3.X API 第六章 组件(4) 自定义元素】的更多相关文章

【KnockoutJS 3.X API 第六章组件(4) 自定义元素】的更多相关文章