Blaze

使用 Blaze(Meteor 的响应式渲染引擎)的文档。

Blaze 是使响应式模板成为可能的包。您可以直接使用 Blaze API 来以编程方式渲染模板并操作“视图”——响应式模板的构建块。

将模板或视图渲染到 DOM 节点并将其插入 DOM,返回一个已渲染的 视图,它可以传递给 Blaze.remove

参数

templateOrView Blaze.TemplateBlaze.View

要渲染的模板(例如 Template.myTemplate)或视图对象。如果为模板,则会 构造 视图对象。如果为视图,则它必须是未渲染的视图,它将成为已渲染的视图并被返回。

parentNode DOM 节点

将作为已渲染模板的父节点的节点。它必须是元素节点。

nextNode DOM 节点

可选。如果提供,则必须是 parentNode 的子节点;模板将插入此节点之前。如果没有提供,则模板将插入为 parentNode 的最后一个子节点。

parentView Blaze.View

可选。如果提供,它将被设置为已渲染视图的 parentView

渲染模板时,使用 onCreated 添加的回调将立即调用,在评估模板的内容之前。使用 onRendered 添加的回调将在视图渲染并插入 DOM 后调用。

已渲染的模板将响应数据更改进行响应式更新,直到使用 Blaze.remove 移除视图,或者视图的父元素被 Meteor 或 jQuery 移除。

如果视图被除了 Meteor 或 jQuery 之外的其他机制移除(Meteor 默认情况下与 jQuery 集成),则视图可能会无限期地继续更新。大多数用户不需要手动渲染模板并将其插入 DOM,但是如果你这样做,请注意始终在不再需要视图时调用 Blaze.remove

使用数据上下文将模板或视图渲染到 DOM 节点。否则与 Blaze.render 相同。

参数

templateOrView Blaze.TemplateBlaze.View

要渲染的模板(例如 Template.myTemplate)或视图对象。

data 对象或函数

要使用的 data 上下文,或者返回 data 上下文的函数。如果提供函数,它将被响应式地重新运行。

parentNode DOM 节点

将作为已渲染模板的父节点的节点。它必须是元素节点。

nextNode DOM 节点

可选。如果提供,则必须是 parentNode 的子节点;模板将插入此节点之前。如果没有提供,则模板将插入为 parentNode 的最后一个子节点。

parentView Blaze.View

可选。如果提供,它将被设置为已渲染视图的 parentView

Blaze.renderWithData(Template.myTemplate, data) 本质上与 Blaze.render(Blaze.With(data, function () { return Template.myTemplate; })) 相同。

客户端
import { Blaze } from 'meteor/blaze'
(blaze/view.js, 第 710 行)

从 DOM 中移除已渲染的视图,停止对其的所有响应式更新和事件监听器。还会销毁与视图关联的 Blaze.Template 实例。

参数

renderedView Blaze.View

Blaze.renderBlaze.renderWithData 的返回值,或者 Blaze.Template 实例的 view 属性。从模板事件处理程序内调用 Blaze.remove(Template.instance().view) 将销毁视图以及该模板并触发模板的 onDestroyed 处理程序。

使用 Blaze.remove 来移除以前使用 Blaze.render 插入的模板或视图,以使 Meteor 附加到 DOM 的任何行为都被清理掉。已渲染的模板或视图现在被认为是 “已销毁”,以及所有嵌套的模板和视图。此外,使用 jQuery 分配给 DOM 节点的任何数据都将被移除,就好像节点被传递给 jQuery 的 $(...).remove() 一样。

Blaze.render 中所述,使用 Blaze.remove “移除”通过 Blaze.render 渲染的所有内容非常重要,除非 renderedView 的父节点被 Meteor 响应式更新或使用 jQuery 移除。

即使要处理的 DOM 节点已经从文档中移除,也可以使用 Blaze.remove,告诉 Blaze 停止跟踪和更新这些节点。

客户端
import { Blaze } from 'meteor/blaze'
(blaze/view.js, 第 778 行)

返回当前数据上下文,或者在渲染来自 Meteor 模板的特定 DOM 元素或视图时使用的数据上下文。

参数

elementOrView DOM 元素Blaze.View

可选。由 Meteor 渲染的元素或视图。

客户端
import { Blaze } from 'meteor/blaze'
(blaze/view.js, 第 733 行)

将模板或视图渲染到 HTML 字符串。

参数

templateOrView Blaze.TemplateBlaze.View

要从中生成 HTML 的模板(例如 Template.myTemplate)或视图对象。

将模板渲染为 HTML 会丢失所有细粒度的响应式性。渲染模板的正常方法是将其从另一个模板中包含({{> myTemplate}})或使用 Blaze.render 以编程方式渲染并插入它。只有在某些情况下,生成 HTML 才是有用的。

由于 Blaze.toHTML 返回字符串,因此它无法响应响应式数据更改来更新 DOM。相反,任何响应式数据更改都将使当前计算失效,如果有的话(例如,作为 Blaze.toHTML 的调用者的 autorun)。

客户端
import { Blaze } from 'meteor/blaze'
(blaze/view.js, 第 745 行)

使用数据上下文将模板或视图渲染到 HTML。否则与 Blaze.toHTML 相同。

参数

templateOrView Blaze.TemplateBlaze.View

要从中生成 HTML 的模板(例如 Template.myTemplate)或视图对象。

data 对象或函数

要使用的 data 上下文,或者返回 data 上下文的函数。

客户端
import { Blaze } from 'meteor/blaze'
(blaze/view.js, 第 52 行)

视图的构造函数,它代表 DOM 的响应式区域。

参数

name 字符串

可选。此类型视图的名称。请参阅 view.name

renderFunction 函数

返回 可渲染内容 的函数。在此函数中,this 被绑定到视图。

在每个模板或模板的一部分(例如模板标签,如 {{foo}}{{#if}})背后,都是一个视图对象,它是一个响应式更新的 DOM 区域。

大多数应用程序不需要了解这些视图,但它们提供了一种方法来理解和自定义 Meteor 的渲染行为,以用于更高级的应用程序和包。

可以通过对模板调用 Blaze.render,或者访问模板实例上的 template.view 来获取视图对象。

视图的核心是一个 autorun,它调用视图的 renderFunction,使用结果创建 DOM 节点,并将视图的内容替换为这些新 DOM 节点。视图的内容可能包含任意数量的连续 DOM 节点(但如果为零,则会自动提供占位符节点,例如注释或空文本节点)。renderFunction 建立的任何响应式依赖关系都会在依赖关系失效时导致对视图内容的完整重新计算。但是,模板的编译方式使得它们没有顶层依赖关系,因此只会渲染一次,而它们的部分可能多次重新渲染。

通过调用构造函数来构造 Blaze.View 时,不会触发任何钩子,也不会执行任何渲染。特别地,该视图尚未被视为“已创建”。只有当视图被实际使用时(通过调用 Blaze.renderBlaze.toHTML,或者包含在另一个视图中),它才会在第一次渲染之前被“创建”。当视图被创建时,如果合适,它的 .parentView 将被设置,然后 onViewCreated 钩子将被触发。“未渲染视图”一词表示新构造的尚未“创建”或渲染的视图。

“当前视图”保存在 Blaze.currentView 中,并在视图渲染、回调、autorun 和模板事件处理程序期间设置。它会影响诸如 Template.currentData() 之类的调用。

以下属性和方法在 Blaze.View 上可用

name字符串

此类型视图的名称。视图名称可用于在代码中识别特定类型的视图,但更常见的是,它们只是帮助调试和理解视图树。Meteor 生成的视图具有诸如“Template.foo”和“if”之类的名称。

parentView视图或 null

导致此视图被渲染的封闭视图(如果有)。

isCreated布尔值

如果此视图已被 Blaze.renderBlaze.toHTML 或另一个视图调用以进行渲染,则为真。一旦变为真,就不会再变为假。“已创建”视图的 .parentView 已被设置为其最终值。isCreatedonViewCreated 钩子被调用之前被设置为真。

isRendered布尔值

如果此视图已通过 Blaze.render 或通过封闭视图的渲染被渲染到 DOM,则为真。通过 Blaze.toHTML 转换为 HTML 不算。一旦变为真,就不会再变为假。

isDestroyed布尔值

如果此视图已被销毁,例如通过 Blaze.remove() 或通过移除它的响应式更新,则为真。已销毁的视图的 autorun 已被停止,并且它的 DOM 节点通常已从所有 Meteor 响应式性中清理,并且可能已拆卸。

renderCount整数

视图被渲染的次数,包括如果视图正在被渲染或重新渲染,则包括当前时间。

autorun(runFunc)

Tracker.autorun 相似,但自动运行会在视图销毁时自动停止,并且在运行 runFunc 时始终设置 当前视图。它与视图的内部自动运行或渲染周期无关。在 runFunc 中,视图绑定到 this

onViewCreated(func)

如果视图尚未创建,则在视图创建时调用 func。在 func 中,视图绑定到 this

此钩子是 created 模板回调的基础。

onViewReady(func)

在视图渲染并插入 DOM 后,等待 刷新时间 结束,调用 func。如果视图在任何时间点被销毁,它将不会触发。可能会多次触发(如果视图重新渲染)。在 func 中,视图绑定到 this

此钩子是 rendered 模板回调的基础。

onViewDestroyed(func)

如果视图尚未销毁,则在视图销毁时调用 func。视图可能会在未被“准备好”的情况下被销毁。在 func 中,视图绑定到 this

此钩子是 destroyed 模板回调的基础。

firstNode()DOM 节点

视图渲染内容的第一个节点。请注意,这可能是一个文本节点。要求视图已渲染。如果视图渲染为零个 DOM 节点,则它可能是一个占位符节点(注释或文本节点)。视图的 DOM 范围包括 view.firstNode()view.lastNode() 之间的节点,包含两端。

lastNode()DOM 节点

视图渲染内容的最后一个节点。

firstNode().

template模板

对于通过调用模板创建的视图,原始的模板对象。例如,Blaze.render(Template.foo).template === Template.foo

templateInstance()模板实例

对于通过调用模板创建的视图,返回此特定视图的 模板实例 对象。例如,在 created 回调中,this.view.templateInstance() === this

模板实例对象具有诸如 datafirstNodelastNode 之类的字段,这些字段不是反应式的,并且不会自动保持更新。调用 templateInstance() 将导致这些字段更新。

客户端
import { Blaze } from 'meteor/blaze'
(blaze/view.js, line 543)

与当前模板助手、事件处理程序、回调或自动运行相对应的视图。如果没有,则为 null

“当前视图”由 Template.currentData()Template.instance() 使用,以确定上下文相关的 data 上下文和模板实例。

客户端
import { Blaze } from 'meteor/blaze'
(blaze/view.js, line 816)

获取当前视图或包含给定 DOM 元素的视图。

参数

element DOM 元素

可选。如果指定,则返回包含 element 的视图。

如果不指定 element,则必须存在当前视图,否则将抛出错误。这与 Blaze.currentView 相反。

客户端
import { Blaze } from 'meteor/blaze'
(blaze/builtins.js, line 16)

构造一个视图,该视图使用 data 上下文渲染内容。

参数

data 对象或函数

用作 data 上下文的对象,或返回此类对象的函数。如果提供函数,则会反应式地重新运行该函数。

contentFunc 函数

返回 可渲染内容 的函数。

返回一个未渲染的视图对象,可以将其传递给 Blaze.render

{{#with}}(如模板中使用)不同,Blaze.With 没有“else”情况,并且 data 上下文的虚假值不会阻止内容渲染。

构造一个视图,该视图有条件地渲染内容。

参数

conditionFunc 函数

反应式地重新运行的函数。结果是真值还是虚假值决定显示 contentFunc 还是 elseFunc。空数组被视为虚假值。

contentFunc 函数

返回 可渲染内容 的函数。

elseFunc 函数

可选。返回 可渲染内容 的函数。如果未提供 elseFunc,则在“else”情况下不会显示任何内容。

返回一个未渲染的视图对象,可以将其传递给 Blaze.render

与模板中的 {{#if}} 的行为匹配。

反向的 Blaze.If

参数

conditionFunc 函数

反应式地重新运行的函数。如果结果为虚假值,则显示 contentFunc,否则显示 elseFunc。空数组被视为虚假值。

contentFunc 函数

返回 可渲染内容 的函数。

elseFunc 函数

可选。返回 可渲染内容 的函数。如果未提供 elseFunc,则在“else”情况下不会显示任何内容。

返回一个未渲染的视图对象,可以将其传递给 Blaze.render

与模板中的 {{#unless}} 的行为匹配。

客户端
import { Blaze } from 'meteor/blaze'
(blaze/builtins.js, line 195)

构造一个视图,该视图为序列中的每个项目渲染 contentFunc

参数

argFunc 函数

反应式地重新运行的函数。该函数可以返回以下两种选项之一

  1. 具有两个字段的对象:'_variable' 和 '_sequence'。每个遍历 '_sequence',它可以是游标、数组、null 或 undefined。在 Each 主体内部,可以使用 '_variable' 字段中指定的名称获取序列中的当前项目。

  2. 未包装到对象中的序列(游标、数组、null 或 undefined)。在 Each 主体内部,当前项目将设置为 data 上下文。

contentFunc 函数

返回 可渲染内容 的函数。

elseFunc 函数

返回 可渲染内容 的函数,在序列中没有项目时显示该内容。

返回一个未渲染的视图对象,可以将其传递给 Blaze.render

与模板中的 {{#each}} 的行为匹配。

客户端
import { Blaze } from 'meteor/blaze'
(blaze/template.js, line 21)

用于模板的构造函数,用于使用特定名称和内容构造视图。

参数

viewName 字符串

可选。使用此模板构造的视图的名称。见 view.name

renderFunction 函数

返回 可渲染内容 的函数。此函数用作使用此模板构造的视图的 renderFunction

由模板编译器定义的模板,例如 Template.myTemplate,是 Blaze.Template 类型的对象(别名为 Template)。

除了诸如 eventshelpers 之类的方法外,还记录为 模板 API 的一部分,以下字段和方法存在于模板对象上

viewName字符串

与构造函数参数相同。

renderFunction函数

与构造函数参数相同。

constructView()

构造并返回一个未渲染的视图对象。每当使用模板时,例如通过 Blaze.render 或通过 {{> foo}}(其中 foo 解析为模板对象),Meteor 都会调用此方法。

constructView() 使用 viewNamerenderFunction 作为构造函数参数构造视图,然后将其配置为模板视图,设置 view.templateview.templateInstance()、事件映射等。

客户端
import { Blaze } from 'meteor/blaze'
(blaze/template.js, line 66)

如果 value 是模板对象(如 Template.myTemplate),则返回 true。

参数

value 任何

要测试的值。

可渲染内容

如果值是以下之一,则它是可渲染内容

  • 模板对象,例如 Template.myTemplate
  • 未渲染的 视图 对象,例如 Blaze.With 的返回值
  • nullundefined

在内部,可渲染内容还包括表示 HTML 标记的对象,但这些对象尚未成为正式支持的公共 API 的一部分。

在 GitHub 上编辑