使用 Handlebars 定义块助手答案

【问题标题】：Defining a block helper with Handlebars使用 Handlebars 定义块助手
【发布时间】：2013-04-02 16:17:19
【问题描述】：

我想定义一个块助手，将块中的文本放入<a href=""></a> 标记中。我使用了来自http://handlebarsjs.com/block_helpers.html 的示例作为开始，但我的代码不起作用。我需要更改哪些内容才能将 <a href="http://www.example.com">test</a> 作为此块助手的输出？

app.js

App = Ember.Application.create();

Handlebars.registerHelper('link', function(options) {
  var result = '<a href="http://www.example.com">' + options.fn(this) + '</a>';
  return Handlebars.SafeString(result);
});

index.html

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <title>Example</title>
    </head>
    <body>
      <script type="text/x-handlebars">
        <p>
        {{#link}}
        test
        {{/link}}
        </p>
      </script>

    </body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/handlebars.js"></script>
    <script type="text/javascript" src="js/ember.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
  </html>

【问题讨论】：

我得到test，我想得到<a href="http://www.example.com">test</a>

标签： ember.js handlebars.js

【解决方案1】：

只是一些细节（已编辑）：

您只需要在返回之前创建一个Handlebars.SafeString 的新实例。请查看@muistooshort 的jsfiddle here，并附上您想要实现的工作示例。
块助手稍微复杂一些，在需要调用具有不同上下文的模板部分时使用。如果不是您的情况，您可以使用 regular Handlebars helpers 的语法。（我将在此处保留以下代码以供将来参考，尽管与本例无关）

在 app.js 中声明帮助器：

Ember.Handlebars.registerHelper('link', function(value) {
  var result = '<a href="http://www.example.com">' + value + '</a>';
  return new Handlebars.SafeString(result);
});

在 index.html 中将您当前的模板替换为：

<script type="text/x-handlebars">
  <p>
    {{link test}}
  </p>
</script>

希望这会有所帮助！

【讨论】：

这对我没有帮助。 “测试”只是一个例子。在我的应用程序中，有一段 HTML 代码（图像加文本）应该嵌入到标记中。我该如何解决这个问题？
@wintermeyer：我认为第一个项目符号涵盖了您需要的所有内容：jsfiddle.net/6Jaya
@muistooshort 说 jsfiddle 很棒，我想你应该在这里添加它作为答案！
但是您的第一个“使用new”项目符号解决了问题，因此欢迎您从这里获取。