美文网首页
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