2017-01-02 37 views
2

我正在使用expressjs和handlebars作爲模板引擎,下面的代碼在Webstorm IDE中使用Express generator。代碼中沒有可見的handlebars要求(我猜快遞生成器有其他地方不可見)Handlebars寄存器支持Expressjs的服務器端

var app = express(); 
. 
.  
app.set('views', path.join(__dirname, 'views')); 
app.set('view engine', 'hbs'); 

如何在這種情況下在服務器端使用registerHelper?

我的其他渲染和partials正在工作。所以handlebars正在做它的工作。它只是registerHelper似乎是擔心的原因。

回答

5

我認爲express-generator只是設置view enginehbs而已。要配置hbs引擎,您必須使用express-handlebars

例如

var app = express(), 
exphbs = require("express-handlebars"); 

app.engine("hbs", exphbs({ 
    defaultLayout: "main", 
    extname: ".hbs", 
    helpers: require("./public/js/helpers.js").helpers, // same file that gets used on our client 
    partialsDir: "views/partials/", // same as default, I just like to be explicit 
    layoutsDir: "views/layouts/" // same as default, I just like to be explicit 
})); 
app.set("view engine", "hbs"); 

而且,helpers.js

var register = function(Handlebars) { 
    var helpers = { 
    // put all of your helpers inside this object 
    foo: function(){ 
     return "FOO"; 
    }, 
    bar: function(){ 
     return "BAR"; 
    } 
    }; 

    if (Handlebars && typeof Handlebars.registerHelper === "function") { 
    // register helpers 
    for (var prop in helpers) { 
     Handlebars.registerHelper(prop, helpers[prop]); 
    } 
    } else { 
     // just return helpers object if we can't register helpers here 
     return helpers; 
    } 

}; 

module.exports.register = register; 
module.exports.helpers = register(null);  

來源:http://www.codyrushing.com/using-handlebars-helpers-on-both-client-and-server/

+0

,然後如何在helpers.js定義傭工? – knowledgeseeker

+0

示例'helpers.js'在博客上可用。 –

0

我已經給了一個豎起大拇指@Mukesh夏爾馬,他非常近了,對我工作的語法和真的把我引向了它。

他正在做更多的事情來使它適用於我認爲的前端。我需要的只是以下內容

// index.js 

//in the declarations 
const exphbs = require('express-handlebars'); 

//when configuring the app view engine 
app.engine('.hbs', exphbs({ 
    extname: '.hbs', 
    helpers: require('./config/handlebars-helpers') //only need this 
})); 
app.set('view engine', '.hbs'); 

然後我有一個簡單的文件,包括我從哪裏有幫助的東西。

// config/handlebars-helpers.js 

module.exports = { 
    ifeq: function(a, b, options){ 
    if (a === b) { 
     return options.fn(this); 
     } 
    return options.inverse(this); 
    }, 
    bar: function(){ 
    return "BAR!"; 
    } 
} 

無需通過或進口車把快遞 - 包括輔助函數的簡單對象下傭工exhbs選項散列的一部分,讓表達HBS通過它自己的方式做所有的登記的。

(加成IFEQ是一個很小的助手,對於一些比較兩個參數並且如果爲真將顯示塊..有用,如:

類=「{{#ifeq thisUrl‘/約’}}活性{{/ IFEQ}}」。要設置一個導航丸類爲‘主動’) 在這裏找到https://gist.github.com/pheuter/3515945

相關問題