在 Meteor 中渲染另一个模板后如何插入或渲染模板？答案

【问题标题】：How to insert or render a template after another template is rendered in Meteor?在 Meteor 中渲染另一个模板后如何插入或渲染模板？
【发布时间】：2014-11-23 03:55:41
【问题描述】：

我有这个布局模板：

<template name="layout">

  {{> yield }}

  {{> tail }}

</template>

现在 Meteor 似乎没有等到 {{> yield }} 完全渲染后才开始渲染 {{> tail }}

这是尾巴。此处的 HTML 需要在创建完 DOM 的其余部分后加载（我使用的是 Bootstrap 模板）。

<template name="tail">

  <!-- Plugin JavaScript -->
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
  <script src="/js/classie.js"></script>
  <script src="/js/cbpAnimatedHeader.js"></script>

  <!-- Contact Form JavaScript -->
  <script src="/js/jqBootstrapValidation.js"></script>
  <script src="/js/contact_me.js"></script>

  <!-- Custom Theme JavaScript -->
  <script src="/js/agency.js"></script>

</template>

在呈现所有其他模板后，如何使 tail.html 中的 HTML 被呈现？

我可以使用：

Template.layout.rendered = function(){

    var scripts = '\
  <!-- Plugin JavaScript -->\
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>\
  <script src="/js/classie.js"></script>\
  <script src="/js/cbpAnimatedHeader.js"></script>\
  \
  <!-- Contact Form JavaScript -->\
  <script src="/js/jqBootstrapValidation.js"></script>\
  <script src="/js/contact_me.js"></script>\
  \
  <!-- Custom Theme JavaScript -->\
  <script src="/js/agency.js"></script>\
    ';

    $('body').append(scripts);

};

但这很难看。它将尾部代码分解成一个字符串，强制你添加\，这使得以后编辑代码变得非常困难。

【问题讨论】：

你可以在你的尾部模板中正常添加脚本，并且只在渲染的事件上初始化它们。

标签： meteor spacebars

【解决方案1】：

var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.onreadystatechange = function() {
    // if (this.readyState == 'complete') { callFunctionFromScript(); }
}
script.src = 'path/to/your-script.js';
head.appendChild(script);

你可以直接应用到html里面的head标签里

Template.layoutHeader.rendered = function() { .. }

【讨论】：