随笔分类 - KnockoutJS
摘要：关于本系列文章 本系列文章总共8个章节，41篇文章，主要翻译自官方API文档，加上自己的一些理解撰写而成。 区别于园子和网络上的其它一些Knockout教程，这个系列教程将由浅入深的系统的介绍Knockout的知识点和使用细节。 并且本系列KnockoutJS教程是基于最新的3.4.0版本入手的。对
阅读全文
摘要：Knockout旨在允许您将任意JavaScript对象用作视图模型。 只要一些视图模型的属性是observables，您可以使用KO将它们绑定到您的UI，并且UI将在可观察属性更改时自动更新。 大多数应用程序需要从后端服务器获取数据。 由于服务器没有任何可观察的概念，它只提供一个纯JavaScript对象（通常序列化为JSON）。 映射插件提供了一种简单的方法来将该简单的JavaScript对象...
阅读全文
摘要：注意：本文档适用于Knockout 3.4.0及更高版本。 ko.onError Knockout包装内部异步调用，并在抛出原始错误之前查找可选的ko.onError回调以执行（如果遇到异常）。 这使您有机会运行自定义逻辑，例如将错误传递到日志记录模块。 此外，由于原始调用被包装在try / catch中，传递给ko.onError的错误包含一个堆栈属性，在使用window.onerror处理错误...
阅读全文
摘要：注意：本文档适用于Knockout 3.4.0及更高版本。 Knockout的微任务队列 Knockout的微任务队列支持调度任务尽可能快地运行，同时仍然是异步的，努力安排它们在发生I / O，回流或重绘之前发生。 它在内部用于Knockout组件以维护异步行为，以及用于安排可观察量的延迟更新。 ko.tasks.schedule(function () { // ... }); 这将把提...
阅读全文
摘要：有时，您可能会通过向Knockout的核心值类型添加新功能来寻找机会来简化您的代码。 您可以在以下任何类型中定义自定义函数： 因为继承，如果你附加一个函数到ko.subscribable，它将可用于所有其他的。 如果你附加一个函数到ko.observable，它将被ko.observableArray继承而不是ko.computed继承。 要附加自定义函数，请将其添加到以下可扩展性点之一：...
阅读全文
摘要：在大多数情况下，数据绑定属性提供了一种干净和简洁的方式来绑定到视图模型。 然而，事件处理是一个常常会导致详细数据绑定属性的领域，因为匿名函数通常是传递参数的推荐技术。 例如： remove 作为替代，Knockout提供了两个帮助函数，它们允许您标识与DOM元素关联的数据： ko.dataFor(element) - 返回可用于与元素绑定的数据 ko.contextFor(ele...
阅读全文
摘要：注意：这个速率限制API是在Knockout 3.1.0中添加的。 通常，更改的observable立即通知其订户，以便依赖于observable的任何计算的observable或绑定都会同步更新。 但是，rateLimit扩展器会导致observable在指定的时间段内抑制和延迟更改通知。 因此，速率限制的observable异步更新依赖关系。 速率限制扩展器可以应用于任何类型的可观察量，包...
阅读全文
摘要：注意：本文档适用于Knockout 3.4.0及更高版本。 对于先前版本，“延迟更新”插件提供类似的支持。 在复杂的应用程序中，由于具有多个交织的依赖关系，更新单个observable可能会触发计算的observable，手动订阅和UI绑定更新的级联。 如果将不必要的中间值推送到视图或产生额外的计算的可观察评估，则这些更新可能是昂贵的和低效的。 即使在简单的应用程序中，更新相关的可观察量或单个可...
阅读全文
摘要：Knockout observables提供了支持读取/写入值并在值改变时通知订阅者所需的基本功能。 但在某些情况下，您可能希望向可观察者添加其他功能。 这可能包括通过在可观察者前面放置一个可写的计算可观察符来向可观察或截取写入添加额外的属性。 敲除扩展器提供了一种简单和灵活的方式来对可观察者进行这种类型的扩充。 如何创建扩展器 创建扩展器涉及向ko.extenders对象添加一个函数。 函数接受...
阅读全文
摘要：Knockout允许您实现复杂的客户端交互性，但几乎所有Web应用程序还需要与服务器交换数据，或至少将本地存储的数据序列化。 最方便的交换或存储数据的方式是JSON格式 - 大多数Ajax应用程序今天使用的格式。 加载或保存数据 Knockout不强制您使用任何一种特殊技术来加载或保存数据。 您可以使用任何适合您所选择的服务器端技术的机制。 最常用的机制是jQuery的Ajax方法，例如getJS...
阅读全文
摘要：无论何时使用组件绑定或自定义元素注入组件，Knockout都将使用一个或多个组件装载器获取该组件的模板和视图模型。 组件加载器的任务是异步提供任何给定组件名称的模板/视图模型对。 本节目录 默认组件加载器 组件加载器实用函数 实现自定义组件加载器 可以实现的功能 getConfig(name, callback) loadComponent(name, componentConfig, ca...
阅读全文
摘要：自定义元素提供了一种将组件注入视图的方便方法。 本节目录 介绍 例子 传递参数 父组件和子组件之间的通信 传递监控属性的表达式 将标记传递到组件中 控制自定义元素标记名称 注册自定义元素 备注1：将自定义元素与常规绑定相结合 备注2：自定义元素不能自行关闭 备注3：自定义元素和Internet Explorer 6到8 高级应用：访问$ raw参数 介绍 自定义元素是组件绑...
阅读全文
摘要：组件绑定将指定的组件注入到元素中，并且可选地将参数传递给它。 本节目录 一个例子 API 组件生命周期 备注1：仅限模板组件 备注2：使用没有容器元素的组件 备注3：将标记传递给组件 处置和内存管理 一个例子 First instance, without parameters Second instance, passing parameters UI源码： First in...
阅读全文
摘要：要使Knockout能够加载和实例化组件，必须使用ko.components.register注册它们，从而提供如此处所述的配置。 注意：作为替代，可以实现一个自定义组件加载器(自定义加载器下一节介绍)，通过自己的约定获取组件，而不是显式配置。 本节目录 将组件注册为viewmodel/template 指定视图模型 构造函数 共享对象实例 一个createViewModel工厂函数 一个A...
阅读全文
摘要：Components (组件)是一个强大的，干净的方式组织您的UI代码，可重复使用的块。 : …可以表示单独的控件/窗口小部件或应用程序的整个部分 …包含自己的视图，通常（但可选）自己的视图模型 …可以预加载或通过AMD或其他模块系统异步加载（按需） …可以接收参数，并可选地将更改写回到它们或调用回调 …可以一起组成（嵌套）或继承自其他组件 …可以轻松地打包，以便跨项目进行重用 …...
阅读全文
摘要：注意：这是一种高级技术，通常仅在创建可重用绑定或扩展语法的库时使用。 这不是你通常需要做的时候使用Knockout构建应用程序。 从Knockout 3.0开始，开发人员可以通过提供在绑定过程中重写DOM节点和绑定字符串的回调来定义自定义语法。 预处理绑定字符串 您可以通过为特定绑定处理程序（例如click，visible或任何自定义绑定处理程序）提供绑定预处理程序，来挂钩Knockout的逻辑来...
阅读全文
摘要：在典型的Knockout应用程序中，DOM元素是动态添加和删除的，例如使用模板绑定或通过控制流绑定（if，ifnot，with和foreach）。 当创建自定义绑定时，通常需要添加清除逻辑，当Knockout删除与您的自定义绑定相关联的元素时，该逻辑运行。 在处理元素时注册回调 要注册要删除节点时要运行的函数，可以调用ko.utils.domNodeDisposal.addDisposeCallb...
阅读全文
摘要：注意：这是一种高级技术，通常仅在创建可重用绑定的库时使用。 这不是你通常需要做的时候使用Knockout构建应用程序。 Knockout的控制流绑定（例如，if和foreach）不仅可以应用于常规DOM元素，而且可以应用于由基于特殊注释的语法定义的“虚拟”DOM元素。 例如： My heading 自定义绑定也可以与虚拟元素一起使用，但要启用此功能...
阅读全文
摘要：注意：这是一种高级技术，通常仅在创建可重用绑定的库时使用。 默认情况下，绑定仅影响它们应用到的元素。 但是如果你想影响所有的后代元素呢？ 为此，只需从绑定的init函数中返回{controlsDescendantBindings：true}即可。 示例1：控制是否应用后代绑定 对于一个非常简单的例子，这里有一个名为allowBindings的自定义绑定，允许后代绑定仅当它的值为true时才应用...
阅读全文
摘要：您不仅限于使用内置的绑定，如click，value绑定等，您可以创建自己的绑定。 这是如何控制视图模型如何与DOM元素进行交互，并且为您提供了大量的灵活性，以便于以复用的方式封装复杂的行为。 注册绑定 要注册绑定，请将其作为ko.bindingHandlers的子属性添加，比如如下例子： ko.bindingHandlers.yourBindingName = { init: functi...
阅读全文
浙公网安备 33010602011771号