美文网首页
webpack与handlebars-loader加载模板文件使

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

作者: dulei_fe | 来源:发表于2016-11-11 15:03 被阅读0次

问题再现:

//-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

相关文章

网友评论

      本文标题:webpack与handlebars-loader加载模板文件使

      本文链接:https://www.haomeiwen.com/subject/mwjfpttx.html