webpack与handlebars-loader加载模板文件使

2016-11-11  本文已影响0人  dulei_fe

问题再现:

//-main.js 入口文件
//加载模板
var template = require("./template/table.tpl");

//数据
var a  = require("./js/a");
//处理函数helpers
Handlebars.registerHelper("stringify",function (_this) {
  return JSON.stringify(_this);
})

此时控制台提示找不到对应的registerHelper
找方案:
1.handerbars-helpers
实现了很多常用的处理函数,看样子不错。不支持webpack,也不想重新换轮子。

2.handlebars-loader配置
配置helperDir将你的helper编译至全局。
配置

    //-webpack.config.js 入口文件
    loaders: [{ 
            test: /\.tpl$/,
            loader: "handlebars-loader?helperDirs[]="+__dirname+"/src/helpers"
        }]

helpers

    //jsonParse.js
    module.exports = function (_this) {
        return JSON.stringify(_this);
    }

使用

   
{{#each pagedata}}
<tr>
    <td>{{@index}}</td>
    <td class="aa"><a href="p3.html?d={{jsonParse this}}">{{powerPlant}}</a></td>
    <td>{{crew}}</td>
    <td>{{major}}</td>
    <td>{{sysName}}</td>
    <td>{{pointCode}}</td>
    <td>{{pointDesc}}</td>
    <td>{{company}}</td>
    <td>{{downRange}}</td>
    <td>{{upRange}}</td>
    <td>{{exceptionStartTime}}</td>
    <td>{{exceptionNum}}</td>
    <td>{{exceptionTotalTime}}</td>
    <td>{{exceptionMaximumDuration}}</td>
</tr> 
{{/each}}

参考地址:
handerbars-loader issues
handlebars helper api

上一篇 下一篇

猜你喜欢

热点阅读