web-dev-qa-db-ja.com

エラー：Handlebars.jsにヘルパーがありません

Nodeとexpressでhandlebars.jsテンプレートを使用しています。 {{@index}}テンプレートタグを使用して番号付きリストを作成していますが、インデックスは0から始まり、1から始めたいので、カスタムヘルパーを使用する必要があるようです。これに関するたくさんの投稿を見てきましたが、次のコードを見つけました：

Handlebars.registerHelper("inc", function(value, options)
{
    return parseInt(value) + 1;
});

{{#each score}}
      <li class="list-group-item">
      <div id="place"> {{inc @index}} &nbsp </div>
      <div class="wordOrName">{{ player_name }}</div>
           <div class="number">{{ score }}</div></li>
        {{/each}}

私が見つけられないように見えるのは、ヘルパー登録関数がどこに行くことになっているのかです。テンプレート自体や他のさまざまな場所に入れてみましたが、それでも取得し続けます

Error: Missing helper: "inc"
   at model.<anonymous>

理想的には、ヘルパーを個別のファイルhelpers.jsに入れたいのですが、ハンドルバーにそれを認識させる方法については、少しはわかりません。

編集：

ハンドルバーは、ノードファイルindex.js内に次のコードを含むプロジェクトに含まれています。

// view engine
app.set('views', __dirname + '/views/');
app.set('view engine', 'handlebars');
app.engine('handlebars', engines.handlebars);

テンプレート自体にヘルパー関数を含めることは不可能のようです。

javascriptnode.jsexpresshandlebars.js
9
Cameron Sima

私はそれを理解しました...ヘルパーは実際に次のようにノードアプリファイルに登録する必要があります：

// view engine
app.set('views', __dirname + '/views/');
app.set('view engine', 'handlebars');
var hbs = require('handlebars');
hbs.registerHelper("inc", function(value, options)
{
    return parseInt(value) + 1;
});
app.engine('handlebars', engines.handlebars);

この情報にもっと簡単にアクセスできるようにしたいのですが、それはあります。

9
Cameron Sima

数学ハンドルバーを登録し、すべての数学演算を実行します。

app.engine('handlebars', exphbs({
  helpers:{
    // Function to do basic mathematical operation in handlebar
    math: function(lvalue, operator, rvalue) {lvalue = parseFloat(lvalue);
        rvalue = parseFloat(rvalue);
        return {
            "+": lvalue + rvalue,
            "-": lvalue - rvalue,
            "*": lvalue * rvalue,
            "/": lvalue / rvalue,
            "%": lvalue % rvalue
        }[operator];
    }
}}));
app.set('view engine', 'handlebars');

その後、ビューで直接操作を実行できます。

    {{#each myArray}}
        <span>{{math @index "+" 1}}</span>
    {{/each}}
5
Priyanshu Chauhan

"helper.js"のように別のファイルにヘルパーを貼り付け、Handlebars JSファイルをインポートした後、それをHTMLページに含めることができます。

<script src="handlebars.min.js"></script>
<script src="helper.js"></script>

Swag（ https://github.com/elving/Swag ）もチェックできます。ハンドルバーヘルパーがたくさん含まれています。

1
raghav

ヘルパーを動作させるためだけにrequire('handlebars')を追加する必要はありません。特急ハンドルバーにこだわることができます。 so var myConfig = { helpers: {x: function() {return "x";}} }のような設定オブジェクトでヘルパーを定義し、それを次のようにexpress-handlebars-objectに渡します：require('express-handlebars').create({myConfig})

以下は、いくつかのヘルパーといくつかのビューディレクトリが構成された完全に機能する例です。

_var express = require('express');
var exphbs = require('express-handlebars');
var app = express();
var hbs = exphbs.create({
    helpers: {
        test: function () { return "Lorem ipsum" },
        json: function (value, options) {
            return JSON.stringify(value);
        }
    },
    defaultLayout: 'main',
    partialsDir: ['views/partials/']
});
app.engine('handlebars', hbs.engine);
app.set('view engine', 'handlebars');
app.set('views', path.join(__dirname, 'views'));
_

私の理解では、require('express-handlebars');から返されたオブジェクトは「実際の」ハンドルバーオブジェクトではありません。したがって、一部の関数に依存することはできません。代わりに、ヘルパーのようなものを設定オブジェクト経由で.create()関数に渡す必要があります

0
Drkawashima