车把助手未定义。答案

【问题标题】：Handlebars helper is not defined.车把助手未定义。
【发布时间】：2016-10-27 21:05:18
【问题描述】：

我有一个显示 mysql 数据库内容的 div。内容太长，所以我决定使用 Handlebar 助手。这是我的html代码：

    <div class="row">
    {{#if news}}
        {{#each news}}

            <div class="col-md-4 img-portfolio">
                <a href="/news-details/{{id}}">
                    <img class="img-responsive img-hover small-img" src="/images/news/{{image}}" alt="">
                </a>
                <h3>
                    <a href="/news-details/{{id}}">{{title}}</a>
                </h3>
                <p> {{substr "10" text}} </p>
            </div>
            {{/each}}        
     {{else}}
     <p>No News</p>
{{/if}}

Handlebar Helper 放在 index.js 文件中如下：

Handlebars.registerHelper('substr', function(length, context, options) {
  if ( context.length > length ) {
       return context.substring(0, length) + "...";
  } else {
      return context;
   }
});

当我运行 nodejs 服务器时，我收到“Handlebar 未定义”错误。我安装了 express-handlebar 包，并在 index.js 文件中将其声明为

var Handlebar = require('express-handlebars');

但还是不行。

【问题讨论】：

标签： javascript node.js handlebars.js handlebarshelper

【解决方案1】：

您需要使用Handlebars 作为变量名而不是Handlebar。

另外，官方的express-handlebars 助手文档建议在exphbs.create 下定义助手。

所以服务器上带有助手的代码应该是这样的：

var exphbs = require("express-handlebars"); // you can use any variable name

var hbs = exphbs.create({
  helpers: {
    substr: function(length, context, options) {
      if (context.length > length) {
        return context.substring(0, length) + "...";
      } else {
        return context;
      }
    }
  }
});

【讨论】：

想怎么做？
@Karatay 编辑了答案以反映 express-handlebars 文档助手注册。有关用法，请参阅 express-handlebars 文档的Usage section。
是的，我试过了，但它一直说缺少助手：“substr”。我有最新版本的 express-handlebars 和 express。
@Karatay 我已经在一个快速快递应用程序上对其进行了测试，它对我有用，你确定你已经配置了视图引擎并且你的所有文件都以 .hbs 结尾（或 .handlebars，如果你设置了“将引擎”视为“车把”）扩展？
是的。出于某种原因，它不适用于自定义助手。我使用#if 和#each 没有任何问题。我还在车把文件中使用了 'code'
{{substr '20' text}}
。

【解决方案2】：

嗯，这不是一个“正确”的答案，但它使问题得到解决。我使用 CSS 使其工作。只需为段落标签添加一个 ID 作为“测试”，并在 style.css 文件中分配 css，如下所示：

#test {
-o-text-overflow: ellipsis;   /* Opera */
text-overflow:    ellipsis;   /* IE, Safari (WebKit) */
overflow:hidden;              /* don't show excess chars */
white-space:nowrap;           /* force single line */
width: 350px;                 /* fixed width */
}

【讨论】：