Blaze 是使响应式模板成为可能的包。您可以直接使用 Blaze API 来以编程方式渲染模板并操作“视图”——响应式模板的构建块。
Blaze.render(templateOrView, parentNode, [nextNode], [parentView])
将模板或视图渲染到 DOM 节点并将其插入 DOM,返回一个已渲染的 视图,它可以传递给 Blaze.remove
。
参数
- templateOrView Blaze.Template 或 Blaze.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
。
Blaze.renderWithData(templateOrView, data, parentNode, [nextNode], [parentView])
使用数据上下文将模板或视图渲染到 DOM 节点。否则与 Blaze.render
相同。
参数
- templateOrView Blaze.Template 或 Blaze.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; }))
相同。
从 DOM 中移除已渲染的视图,停止对其的所有响应式更新和事件监听器。还会销毁与视图关联的 Blaze.Template 实例。
参数
- renderedView Blaze.View
-
Blaze.render
或Blaze.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 停止跟踪和更新这些节点。
返回当前数据上下文,或者在渲染来自 Meteor 模板的特定 DOM 元素或视图时使用的数据上下文。
参数
- elementOrView DOM 元素 或 Blaze.View
-
可选。由 Meteor 渲染的元素或视图。
将模板或视图渲染到 HTML 字符串。
参数
- templateOrView Blaze.Template 或 Blaze.View
-
要从中生成 HTML 的模板(例如
Template.myTemplate
)或视图对象。
将模板渲染为 HTML 会丢失所有细粒度的响应式性。渲染模板的正常方法是将其从另一个模板中包含({{> myTemplate}}
)或使用 Blaze.render
以编程方式渲染并插入它。只有在某些情况下,生成 HTML 才是有用的。
由于 Blaze.toHTML
返回字符串,因此它无法响应响应式数据更改来更新 DOM。相反,任何响应式数据更改都将使当前计算失效,如果有的话(例如,作为 Blaze.toHTML
的调用者的 autorun)。
Blaze.toHTMLWithData(templateOrView, data)
使用数据上下文将模板或视图渲染到 HTML。否则与 Blaze.toHTML
相同。
参数
- templateOrView Blaze.Template 或 Blaze.View
-
要从中生成 HTML 的模板(例如
Template.myTemplate
)或视图对象。 - data 对象或函数
-
要使用的 data 上下文,或者返回 data 上下文的函数。
new Blaze.View([name], renderFunction)
在每个模板或模板的一部分(例如模板标签,如 {{foo}}
或 {{#if}}
)背后,都是一个视图对象,它是一个响应式更新的 DOM 区域。
大多数应用程序不需要了解这些视图,但它们提供了一种方法来理解和自定义 Meteor 的渲染行为,以用于更高级的应用程序和包。
可以通过对模板调用 Blaze.render
,或者访问模板实例上的 template.view
来获取视图对象。
视图的核心是一个 autorun,它调用视图的 renderFunction
,使用结果创建 DOM 节点,并将视图的内容替换为这些新 DOM 节点。视图的内容可能包含任意数量的连续 DOM 节点(但如果为零,则会自动提供占位符节点,例如注释或空文本节点)。renderFunction
建立的任何响应式依赖关系都会在依赖关系失效时导致对视图内容的完整重新计算。但是,模板的编译方式使得它们没有顶层依赖关系,因此只会渲染一次,而它们的部分可能多次重新渲染。
通过调用构造函数来构造 Blaze.View
时,不会触发任何钩子,也不会执行任何渲染。特别地,该视图尚未被视为“已创建”。只有当视图被实际使用时(通过调用 Blaze.render
或 Blaze.toHTML
,或者包含在另一个视图中),它才会在第一次渲染之前被“创建”。当视图被创建时,如果合适,它的 .parentView
将被设置,然后 onViewCreated
钩子将被触发。“未渲染视图”一词表示新构造的尚未“创建”或渲染的视图。
“当前视图”保存在 Blaze.currentView
中,并在视图渲染、回调、autorun 和模板事件处理程序期间设置。它会影响诸如 Template.currentData()
之类的调用。
以下属性和方法在 Blaze.View 上可用
- name字符串
此类型视图的名称。视图名称可用于在代码中识别特定类型的视图,但更常见的是,它们只是帮助调试和理解视图树。Meteor 生成的视图具有诸如“Template.foo”和“if”之类的名称。
- parentView视图或 null
导致此视图被渲染的封闭视图(如果有)。
- isCreated布尔值
如果此视图已被
Blaze.render
或Blaze.toHTML
或另一个视图调用以进行渲染,则为真。一旦变为真,就不会再变为假。“已创建”视图的.parentView
已被设置为其最终值。isCreated
在onViewCreated
钩子被调用之前被设置为真。- 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
。模板实例对象具有诸如
data
、firstNode
和lastNode
之类的字段,这些字段不是反应式的,并且不会自动保持更新。调用templateInstance()
将导致这些字段更新。
与当前模板助手、事件处理程序、回调或自动运行相对应的视图。如果没有,则为 null
。
“当前视图”由 Template.currentData()
和 Template.instance()
使用,以确定上下文相关的 data 上下文和模板实例。
如果不指定 element
,则必须存在当前视图,否则将抛出错误。这与 Blaze.currentView
相反。
构造一个视图,该视图使用 data 上下文渲染内容。
参数
- data 对象或函数
-
用作 data 上下文的对象,或返回此类对象的函数。如果提供函数,则会反应式地重新运行该函数。
- contentFunc 函数
-
返回 可渲染内容 的函数。
返回一个未渲染的视图对象,可以将其传递给 Blaze.render
。
与 {{#with}}
(如模板中使用)不同,Blaze.With
没有“else”情况,并且 data 上下文的虚假值不会阻止内容渲染。
Blaze.If(conditionFunc, contentFunc, [elseFunc])
返回一个未渲染的视图对象,可以将其传递给 Blaze.render
。
与模板中的 {{#if}}
的行为匹配。
Blaze.Unless(conditionFunc, contentFunc, [elseFunc])
返回一个未渲染的视图对象,可以将其传递给 Blaze.render
。
与模板中的 {{#unless}}
的行为匹配。
Blaze.Each(argFunc, contentFunc, [elseFunc])
构造一个视图,该视图为序列中的每个项目渲染 contentFunc
。
参数
- argFunc 函数
-
反应式地重新运行的函数。该函数可以返回以下两种选项之一
-
具有两个字段的对象:'_variable' 和 '_sequence'。每个遍历 '_sequence',它可以是游标、数组、null 或 undefined。在 Each 主体内部,可以使用 '_variable' 字段中指定的名称获取序列中的当前项目。
-
未包装到对象中的序列(游标、数组、null 或 undefined)。在 Each 主体内部,当前项目将设置为 data 上下文。
-
- contentFunc 函数
-
返回 可渲染内容 的函数。
- elseFunc 函数
-
返回 可渲染内容 的函数,在序列中没有项目时显示该内容。
返回一个未渲染的视图对象,可以将其传递给 Blaze.render
。
与模板中的 {{#each}}
的行为匹配。
new Blaze.Template([viewName], renderFunction)
由模板编译器定义的模板,例如 Template.myTemplate
,是 Blaze.Template
类型的对象(别名为 Template
)。
除了诸如 events
和 helpers
之类的方法外,还记录为 模板 API 的一部分,以下字段和方法存在于模板对象上
- viewName字符串
与构造函数参数相同。
- renderFunction函数
与构造函数参数相同。
- constructView()
构造并返回一个未渲染的视图对象。每当使用模板时,例如通过
Blaze.render
或通过{{> foo}}
(其中foo
解析为模板对象),Meteor 都会调用此方法。constructView()
使用viewName
和renderFunction
作为构造函数参数构造视图,然后将其配置为模板视图,设置view.template
、view.templateInstance()
、事件映射等。
如果 value
是模板对象(如 Template.myTemplate
),则返回 true。
参数
- value 任何
-
要测试的值。
可渲染内容
如果值是以下之一,则它是可渲染内容
在内部,可渲染内容还包括表示 HTML 标记的对象,但这些对象尚未成为正式支持的公共 API 的一部分。