Template实例的创建和渲染回调有什么区别？

Question

官方文件

当一个Template.myTemplate实例被渲染到DOM节点并第一次放入文档时,会调用[rendered].

在第一次评估模板的逻辑之前调用[created]回调.

有点让我困惑.他们之间究竟有什么区别？一旦模板实例被"创建",它们似乎都被调用.如果是这样,他们各自的用法是什么？PS我发现Meteor文档的很大一部分缺乏可靠的例子,初学者很难理解.

Answer 1

rendered在屏幕上呈现DOM后触发模板回调.在created实例化模板但尚未呈现时触发回调.

您可以使用rendered回调来更改页面上的任何内容.例如,如果您使用,select2您需要将<select>选项转换为更好的select2版本,您可以执行此操作(您需要select2包,但任何jquery插件的工作方式都相似)

Template.hello.rendered = function() {
    this.$("select").select2({});
}

您无法执行此操作,.created因为尚未在DOM上绘制select2.

您可以使用.created设置任何变量.例如,如果您Session.get("myvalue")在页面上的某个位置使用.created,则可以使用在将要生成页面时将其重置为默认值,例如

Template.hello.created = function() {
    Session.set("myvalue", null);
}

通常,渲染的回调用于以某种方式操纵DOM.创建的回调在不是关于DOM而是关于管理变量或数据时使用.

这里有一些区别.

如果您使用每个模板订阅(最近添加到Meteor),您将使用.created¬ .rendered:

Template.hello.created = function() {
    this.subscribe("some_publication");
}

您可以使用.rendered初始化谷歌地图

Template.hello.rendered = function() {
    var map = new google.maps.Map(document.getElementById('map-canvas'), {});
}