handlebars.js – 编译模板时手轮解析错误

前端之家收集整理的这篇文章主要介绍了handlebars.js – 编译模板时手轮解析错误前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在使用 Windows CMD编译句柄模板时,我收到下面的错误.我的手柄客户端和服务器都是@ 1.3.0,请帮我确定我在哪里出错

dashboard.handlebars代码

  1. <ul class="small-block-grid-2 medium-block-grid-2 large-block-grid-2" style="text-align:center;">
  2. <li>
  3.  
  4. <div class="chart" data-percent="{{#getPercent reward_point.point_achived reward_point.point_available}}">
  5. <span>{{#getPercent reward_point.point_achived reward_point.point_available}}%</span>
  6. <span style="font-size:.5em;display:inline-block;">{{reward_point.point_achived}}</span>
  7. <span style="font-size:.5em; color:#005390; display:inline-block;">/{{reward_point.point_available}} RP</span>
  8. </div>
  9. </li>
  10. <li>
  11.  
  12. <div class="chart" data-percent="{{#getPercent calorie_budget.point_achived calorie_budget.point_available}}">
  13. <span>{{#getPercent calorie_budget.point_achived calorie_budget.point_available}}</span>
  14. <span style="font-size:.5em;display:inline-block;">{{calorie_budget.point_achived}}</span>
  15. <span style="font-size:.5em; color:#005390; display:inline-block;">/{{calorie_budget.point_available}} cal</span>
  16. </div>
  17. </li>
  18. <li>
  19.  
  20. <div class="chart" data-percent="{{#getPercent 30_day_challenge.point_achived 30_day_challenge.point_available}}">
  21. <span>{{#getPercent 30_day_challenge.point_achived 30_day_challenge.point_available}}</span>
  22. <span style="font-size:.5em;display:inline-block;">{{30_day_challenge.point_achived}}</span>
  23. <span style="font-size:.5em; color:#005390; display:inline-block;">/{{30_day_challenge.point_available}} complete</span>
  24. </div>
  25. </li>
  26. <li>
  27.  
  28. <div class="chart" data-percent="{{#getPercent physical_activity.point_achived physical_activity.point_available}}">
  29. <span>{{#getPercent physical_activity.point_achived physical_activity.point_available}}</span>
  30. <span style="font-size:.5em;display:inline-block;">{{physical_activity.point_achived}}</span>
  31. <span style="font-size:.5em; color:#005390; display:inline-block;">/{{physical_activity.point_available}} min</span>
  32. </div>
  33. </li>
  34. </ul>

cmd中的错误

  1. Error: Parse error on line 34:
  2. </ul> </li>
  3. ----------------------^
  4. Expecting 'CONTENT','COMMENT','OPEN_BLOCK','OPEN_INVERSE','OPEN_ENDBLOCK','
  5. OPEN','OPEN_UNESCAPED','OPEN_PARTIAL',got 'EOF'
  6. at Object.parseError (C:\Users\User\AppData\Roaming\npm\node_modules\handleb
  7. ars\dist\cjs\handlebars\compiler\parser.js:107:11)
  8. at Object.parse (C:\Users\User\AppData\Roaming\npm\node_modules\handlebars\d
  9. ist\cjs\handlebars\compiler\parser.js:159:22)
  10. at HandlebarsEnvironment.parse (C:\Users\User\AppData\Roaming\npm\node_modul
  11. es\handlebars\dist\cjs\handlebars\compiler\base.js:12:17)
  12. at precompile (C:\Users\User\AppData\Roaming\npm\node_modules\handlebars\dis
  13. t\cjs\handlebars\compiler\compiler.js:435:17)
  14. at HandlebarsEnvironment.hb.precompile (C:\Users\User\AppData\Roaming\npm\no
  15. de_modules\handlebars\dist\cjs\handlebars.js:22:12)
  16. at processTemplate (C:\Users\User\AppData\Roaming\npm\node_modules\handlebar
  17. s\bin\handlebars:188:78)
  18. at C:\Users\User\AppData\Roaming\npm\node_modules\handlebars\bin\handlebars:
  19. 194:3
  20. at Array.forEach (native)
  21. at Object.<anonymous> (C:\Users\User\AppData\Roaming\npm\node_modules\handle
  22. bars\bin\handlebars:193:8)
  23. at Module._compile (module.js:456:26)

解决方法

你正在调用你的getPercent-helper,在它前面加上一个哈希,这样就成了一个block-statement,然后需要使用{{/ getPercent}}关闭它.既然不需要它作为一个块,你可能只需从模板中删除哈希.
  1. <div class="chart" data-percent="{{getPercent reward_point.point_achived reward_point.point_available}}">
  2. <span>{{getPercent reward_point.point_achived reward_point.point_available}}%</span>
  3. <span style="font-size:.5em;display:inline-block;">{{reward_point.point_achived}}</span>
  4. <span style="font-size:.5em; color:#005390; display:inline-block;">/{{reward_point.point_available}} RP</span>
  5. </div>

猜你在找的JavaScript相关文章