把手预编译类型错误 [英] Handlebars precompile type error

查看：86
本文介绍了把手预编译类型错误的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在我的handlebars预编译模板中获得了typeError



在查看了一下stackoverflow后，问题与任务编译器和handlebar版本之间的兼容性问题有关。 p>

这是我的把手版本：

$ handlebars -v
2.0.0



$ handlebars postlist.hbs | grepcompiler
，compiler：[6，> = 2.0.0-beta.1]

浏览器输出：handlebars .compiler_version是6



我猜这可能是我的问题，但不知道如何升级我的编译器以放弃测试版。 （？）[这应该不是两个匹配的问题]



我的grunt任务不会引发任何错误并创建文件：

$
$ b

$ grunt handlebars：compile



运行handlebars：compile（handlebars）任务



创建了1个文件。



完成，没有错误。



这是我的oneline js：var template = Handlebars.templates ['postlist'];



这是我在console.log中获得的错误
Uncaught TypeError：无法读取未定义的属性'postlist'。

请帮忙！



这是我的咕噜声： 

 （function（）{
'use strict'; 
 module.exports = function（grunt）{
 
 //全局变量
 var _globalConfig = {
 lessDir：'_less /'，
 cssDir：'css /'，
 jsDir：'js /'，
 iconsDir：'assets / icoMoon / SVG /' ，
 templateDir：'temptpl /'
}; 
 
 //项目配置
 grunt.initConfig（{
 //全局变量
 _globalConfig：_globalConfig，
 pkg：grunt.file.readJSON（'package.json'），
 
 //文件包含，https://github.com/vanetix/grunt-includes 
 // TODO：设置它
包含：{
文件：{
 src：['path / to / foo.html'，'path / to / bar。 html']，// S ource文件
 dest：'tmp'，//目的地目录
 flatten：true，
 cwd：'。'，
选项：{
 silent：true，
 banner：'<！ - 包含文件位置：<％includes.files.dest％> - >'
} 
} 
}，
 //适合CSS预处理器
 suitcss：{
 options：{
 //任务特定的选项在这里。 
 conform：false 
}，
 your_target：{
 files：{
'<％= _globalConfig.cssDir％><％= pkg.name％ > -suit.dev.css'：['<％= _globalConfig.cssDir％> lib / site.css'，'<％= _globalConfig.cssDir％> lib / * .css']，
 
 
 $静态Web服务器
 nodestatic {
服务器：{
 options：{
 port： 9009 
} 
} 
}，
 svgmin：{
选项：{
插件：[
 {
 removeViewBox：false 
}，{
 removeUselessStrokeAndFill：false 
}，{
 cleanupIDs：false 
} 
] 
}，
 dist： {
档案：{
'img / svg-icons.min.svg'：'img / svg-icons.svg'
} 
} 
}，
 svgstore：{
选项：{
前缀：'Icon-'，
清理：['fill'，'viewbox'] 
}，
默认：{ 
档案：{
'img / svg-icons.svg'：['<％= _globalConfig.iconsDir％> *。svg']，
}，
} ，
}，
 //较少编译器
 less：{
选项：{
 ieCompat：true，
 sourceMap：true，
 sourceMapBasepath ：'_less'，
 outputSourceFiles：true 
}，
 dev：{
 files：{
'<％= _globalConfig.cssDir％><％ = pkg.name％> .css'：'<％= _globalConfig.lessDir％><％= pkg.name％> .less'
} 
} 
} ，
 handlebars：{
 compile：{
 files：{
 //<％= _globalConfig.jsDir％> lib / _templates.js：['< ％= _globalConfig.templateDir％> * .hbs'] 
<％= _globalConfig.jsDir％> temptpl.js：['<％= _globalConfig.templateDir％> *。hbs'] 
} 
 } 
}，
 watch：{
 css：{
 //观察LESS文件更改，然后触发LESS编译
文件：['<％= _globalConfig.lessDir ％> ** / *。less']，
 tasks：['less：dev'，] 
}，
 suit：{
 //观看网站CSS文件然后转到Suit-CSS预处理器
文件：['<％= _globalConfig.cssDir％><％= pkg.name％> -suit.css'，'<％= _globalConfig.cssDir ％> lib / *。css']，
 tasks：['suitcss'] 
}，
 svg：{
 files：['<％= _globalConfig.iconsDir ％> *。svg']，
 tasks：['svgstore'，'svgmin'] 
}，
 hbs：{
 files：['<％= _globalConfig .templateDir％> *。hbs']，
任务：[ '
} 
 // js：{
 //文件：['<％= _globalConfig.jsDir％> ** / *。js']，
 //任务：['import：dev'] 
 //}，
 // svg：{
 //文件：['<％= _globalConfig.iconsDir％> *。 svg']，
 //任务：['svgstore'，'svgmin'] 
 //} 
}，
 
}）; 
 
 //在package.json中找到加载插件
 require（'matchdep'）。filterDev（'grunt  -  *'）。forEach（grunt.loadNpmTasks）; 
 
 // Grunt Tasks 
 grunt.registerTask（'prepsvg'，['svgstore'，'svgmin']）; 
 grunt.registerTask（'suitup'，['watch：suit']）; 
 grunt.registerTask（'default'，['watch']）; 
 
}; 
}（））;


解决方案

在这里找到答案： https://github.com/gruntjs/grunt-contrib-handlebars/issues/60 p> 

 句柄：{
编译：{
文件：{
public / js / templates / templates.js：public / js / templates / *。hbs
}，
 options：{
 namespace：'Handlebars.templates'，
 processName：function（filePath ）{
 var pieces = filePath.split（/）; 
 return pieces [pieces.length  -  1] .replace（'。hbs'，''）; 
} 
} 
} 
}


I'm getting typeError in my handlebars precompiled templates

After looking around stackoverflow seems the issue is related to compatibility issues between the task compiler and handlebars version.

This is my handlebars version:

$ handlebars -v 2.0.0

$ handlebars postlist.hbs | grep "compiler" },"compiler":[6,">= 2.0.0-beta.1"]

The browser output of : handlebars.compiler_version is 6

I'm guessing this might be my problem but not sure how to upgrade my compiler to drop the beta. (?) [THIS SHOULDN'T BE A PROBLEM SINCE BOTH MATCH]

my grunt tasks doesn't throw any errors and the file is created:

$ grunt handlebars:compile

Running "handlebars:compile" (handlebars) task

1 file created.

Done, without errors.

This is my oneline js: var template = Handlebars.templates['postlist'];

This is the error i'm getting in console.log Uncaught TypeError: Cannot read property 'postlist' of undefined.

Please help!

This is my grunt file:

(function(){
  'use strict';
  module.exports = function(grunt) {

    // Global Vars
    var _globalConfig = {
      lessDir: '_less/',
      cssDir: 'css/',
      jsDir: 'js/',
      iconsDir: 'assets/icoMoon/SVG/',
      templateDir: 'temptpl/'
    };

    // Project configuration.
    grunt.initConfig({
      // Global Vars
      _globalConfig: _globalConfig,
      pkg: grunt.file.readJSON('package.json'),  

      // File Includes, https://github.com/vanetix/grunt-includes
      // TODO: set this up.
      includes: {
        files: {
          src: ['path/to/foo.html', 'path/to/bar.html'], // Source files
          dest: 'tmp', // Destination directory
          flatten: true,
          cwd: '.',
          options: {
            silent: true,
            banner: '<!-- Include File Location: <% includes.files.dest %> -->'
          }
        }
      },
      // Suit CSS Preprocessor
      suitcss: {
        options: {
          // Task-specific options go here.
          conform: false
        },
        your_target: {
          files: {
            '<%= _globalConfig.cssDir %><%= pkg.name %>-suit.dev.css': ['<%= _globalConfig.cssDir %>lib/site.css','<%= _globalConfig.cssDir %>lib/*.css'],
          }
        }
      },
      // Static Web Server
      nodestatic: {
        server: {
          options: {
            port: 9009
          }
        }
      },
      svgmin: {
        options: {
          plugins: [
            {
              removeViewBox: false
            }, {
              removeUselessStrokeAndFill: false
            }, {
              cleanupIDs: false
            }
          ]
        },
        dist: {
          files: {
            'img/svg-icons.min.svg': 'img/svg-icons.svg'
          }
        }
      },
      svgstore: {
        options: {
          prefix: 'Icon-',
          cleanup: ['fill','viewbox']
        },
        default: {
          files: {
            'img/svg-icons.svg': ['<%= _globalConfig.iconsDir %>*.svg'],
          },
        },
      },
      // Less Compiler
      less: {
        options: {
          ieCompat: true,
          sourceMap: true,
          sourceMapBasepath: '_less',
          outputSourceFiles: true
        },
        dev: {
          files: {
            '<%= _globalConfig.cssDir %><%= pkg.name %>.css': '<%= _globalConfig.lessDir %><%= pkg.name %>.less'
          }
        }
      },
      handlebars: {
        compile: {
          files: {
            // "<%= _globalConfig.jsDir %>lib/_templates.js": ['<%= _globalConfig.templateDir %>*.hbs']
            "<%= _globalConfig.jsDir %>temptpl.js": ['<%= _globalConfig.templateDir %>*.hbs']
          }
        }
      },
      watch: {
        css: {
          // Watches LESS file changes then triggers LESS compile
          files: ['<%= _globalConfig.lessDir %>**/*.less'],
          tasks: ['less:dev',]
        },
        suit: {
          // Watches Site CSS file for changes then passes to Suit-CSS preprocessor
          files: ['<%= _globalConfig.cssDir %><%= pkg.name %>-suit.css','<%= _globalConfig.cssDir %>lib/*.css'],
          tasks: ['suitcss']
        },
        svg: {
          files: ['<%= _globalConfig.iconsDir %>*.svg'],
          tasks: ['svgstore','svgmin']
        },
        hbs: {
          files: ['<%= _globalConfig.templateDir %>*.hbs'],
          tasks: ['handlebars']
        }
        // js: {
        //   files: ['<%= _globalConfig.jsDir %>**/*.js'],
        //   tasks: ['import:dev']
        // },
        // svg: {
        //   files: ['<%= _globalConfig.iconsDir %>*.svg'],
        //   tasks: ['svgstore','svgmin']
        // }
      },

    });

    // Load Plugins Found in package.json
    require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

    // Grunt Tasks
    grunt.registerTask('prepsvg',['svgstore','svgmin']);
    grunt.registerTask('suitup',['watch:suit']);
    grunt.registerTask('default', ['watch']);

  };
}());

解决方案

Found the answer here: https://github.com/gruntjs/grunt-contrib-handlebars/issues/60

handlebars: {
    compile: {
        files: {
            "public/js/templates/templates.js": "public/js/templates/*.hbs"
        },
        options: {
            namespace: 'Handlebars.templates',
            processName: function(filePath) {
                var pieces = filePath.split("/");
                return pieces[pieces.length - 1].replace('.hbs', ''); 
                }
        }
    }
}

这篇关于把手预编译类型错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆