脚本标签内的流星模板答案

【问题标题】：Meteor Template Inside Script Tag脚本标签内的流星模板
【发布时间】：2013-01-08 20:55:51
【问题描述】：

我想用 Meteor 模板填充 script type="text/html 标签。

所以，我知道这是一件很奇怪的事情。我想这样做的一半原因是因为 Cloud9 无法区分 JS 脚本标签和 HTML 脚本标签，并且当您尝试在 script 标签中编写 HTML 时，它的语法高亮和标签补全会中断。我的另一半只是好奇这是否可能，因为存在一种丑陋的解决方法。

所以这个：

<body>
    <script type="text/html" id="test">
        {{> test}}
    </script>
</body>

<template name="test">
    <span>Test</span>
</template>

产生这个：

<script type="text/html" id="test">
    <!--label:YRgyaMH8-->
</script>

任何人都有办法强制它呈现模板，而不是看起来像评估名称作为评论？

【问题讨论】：

您的最终目标是什么？是否有一个模板可供另一个 JS 组件控制？我问 b/c 还有其他方法可以将模板从 HTML 传递到 JS，而无需将其嵌入脚本标记中。例如，看看这个帖子：nczonline.net/blog/2011/10/11/…
我的最终目标是利用 Cloud9 IDE 功能来编写 HTML，以维护将由 Knockout 使用的模板。 Knockout 有一个使用external template engines 的方法，但是它很麻烦并且牺牲了在IDE 中将模板编写为HTML 的优势。由于我已经在使用 Meteor，我认为使用它的“模板”系统将普通 HTML 移动到脚本标签中会很好，Cloud 9 会正常中断，因为它的“智能”足以知道脚本标签中的内容是Javascript。
您是否考虑过上述 Knockout 并使用 Meteor 来满足您的绑定需求？我并不完全熟悉 Meteor 和 Knockout 所做的一切，但似乎它们在很多功能上都有重叠。
@klamping 是的。我在一个项目中使用过纯流星，但我不喜欢它的模板模型。使用敲除替换其主干样式模板/控制器系统对我来说是理想的。
明白了。将在答案中发布类似于我在第一条评论中所写的建议。它可能无法解决它，但我想我会把它扔在那里。

标签： meteor

【解决方案1】：

我建议不要使用 script 标签，而是使用 Cloud9 不会将其视为 JS 并且 Meteor 不会捏造的其他通用标签。使用我对问题的评论中的示例，它看起来像这样：

<div id="template">
  <!--<span>test</span>-->
</div>

在你的 JS 中你会解析：

var template = document.getElementById('template').firstChild.nodeValue,
    result = parseTemplate(template, values);

这是基本的想法。得到结果后，你必须将其转换为 Knockout 的模板解析。

【讨论】：

淘汰赛要求模板在脚本标签中。
这是一个 hack，但您能否在执行 Knockout 命令之前将模板写入新的脚本标签？
也许吧。我将不得不深入研究 Meteor 是如何存储模板的。

【解决方案2】：

提交另一个答案 b/c 我想保留我以前的答案，仅作记录。我认为这种方法会更好。

在您的 html 中，您将定义两个部分。第一个是您要放置模板代码的位置。它将进入一个普通 div 标签内的评论。第二个是放置模板以供 Knockout 使用的位置。它看起来像这样：

<template name="koTemplate">
    <div id="myTemplate">
        <span>Here is my template <a href="#">with children</a></span>
    </div>

    <script type="text/html" id="test"></script>
</template>

然后在你的客户端JS代码中，你要添加a callback to run when the template is rendered

Template.koTemplate.rendered = function () {
  // Get the first node, then get the content inside of it
  var templateHtml = this.firstNode.innerHTML;

  // Remove the element so it doesn't get rendered
  this.firstNode.parentNode.removeChild(this.firstNode);
  // another option is to surround the contents inside the template w/comments, but that loses syntax highlighting

  // Get the target node for placing the template in
  var templateNode = this.lastNode;

  // place the content from the original node to the target node
  templateNode.innerHTML = templateHtml;
};

这基本上会获取模板的内容，删除模板，然后将其放入脚本标签中。结果将如下所示：

<script type="text/html" id="test">
    <span>Here is my template <a href="#">with children</a></span>
</script>

【讨论】：

这会起作用，我现在可能会这样做，但它有点麻烦。这也意味着该部分会被模板更改，因为此代码处于反应式上下文中。理想情况下，我想找出 Meteor 内部是什么使它呈现脚本标签内的注释，而不是真正的模板。改变它会更干净
同意。 Meteor 文档仍然有点缺乏 imo