3

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

所以，这是一件很奇怪的事情，我知道。我想这样做的一半原因是因为 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>

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

4

2 回答 2

1

提交另一个答案 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 代码中，您将添加一个回调以在模板渲染时运行 

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>
于 2013-02-08T14:06:52.087 回答
0

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

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

在您的 JS 中，您将解析：

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

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

于 2013-02-07T23:31:04.810 回答