webpack与handlebars-loader加载模板文件使用helpers问题

问题再现:

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • webpack 介绍 webpack 是什么 为什么引入新的打包工具 webpack 核心思想 webpack 安...
    yxsGert阅读 6,647评论 2 71
  • 前言 webpack2和vue2已经不是新鲜东西了,满大街的文章在讲解webpack和vue,但是很多内容写的不是...
    技术宅小青年阅读 6,655评论 4 43
  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 8,347评论 7 35
  • 作者:小 boy (沪江前端开发工程师)本文原创,转载请注明作者及出处。原文地址:https://www.smas...
    iKcamp阅读 2,813评论 0 18
  • CocoaPods github 上搜索CocoaPods可以联系开发者解决使用问题 安装 0.介绍:帮助开发者管...
    gpr阅读 2,362评论 0 0

友情链接更多精彩内容