Question

我正在尝试使用Backbone的项目使用JST模板。一切似乎都很好，但是我遇到了一个语法错误，我无法解决这个问题。

这是控制台输出的内容：

Running "jst:compile" (jst) task
>> SyntaxError: Unexpected token =
Warning: JST failed to compile. Use --force to continue.

Aborted due to warnings.

使用--verbose运行

Verifying property jst.compile exists in config...OK
Files: templates/ideas/idea.jst -> scripts/templates/ideas/idea.js
Files: templates/ideas/idea_index.jst -> scripts/templates/ideas/idea_index.js
Options: namespace="JST", templateSettings={"interpolate":{}}, processContent=undefined, separator="\n\n", prettify, processName=undefined
Reading templates/ideas/idea.jst...OK
>> SyntaxError: Unexpected token =
Warning: JST failed to compile. Use --force to continue.

Aborted due to warnings.

这是它正在尝试编译的文件：

<!-- IDEA START -->
<div class="ideadata" data-id="<%= id %>" data-date="<%= this.date %>" data-votes="<%= this.votes %>">

  <!-- Id -->
  <span class="id">#<%= this.id %></span>

  <!-- Idea -->
  <p><%= this.content %></p>

  <!-- Voting and social options -->
  <div class="social">
    <!-- VOTER -->
      <!-- HTML -->
    <!-- END -->

    <a href="#" onclick="window.open(
      'https://twitter.com/intent/tweet?original_referer=' + encodeURIComponent(location.href) + '&screen_name=roskildefestival&text=<%= this.content %>&tw_p=tweetbutton', 
      'twitter-share-dialog', 
      'width=550,height=390');
        return false;"><img src="http://cdn3.iconfinder.com/data/icons/picons-social/57/03-twitter-20.png" /></a>

    <a href="#" onclick="window.open(
      'https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(location.href), 
      'facebook-share-dialog', 
      'width=626,height=436');
        return false;"><img src="http://cdn3.iconfinder.com/data/icons/wpzoom-developer-icon-set/500/01-20.png" /></a>
  </div>

</div>
<!-- IDEA END -->

我尝试将＆lt;％=替换为＆lt;％，这似乎是成功的，但这不是我想要实现的目标。

我在这里做错了什么，或者这不是编写JST模板的正确方法吗？

当我在Rails上运行时，我曾经使用* .jst.eco作为我的模板文件，但由于这是一个PHP项目，我需要找出另一种方法来做事情，因此也不确定是否这是这样做的最佳方式。

第1次编辑：

所以在得到一些反馈之后，我尝试用这段代码将其简化为最简单的：

<% if(true){ %>
  <div>Hey</div>
<% } %>

成功编译并给我这个：

this["JST"] = this["JST"] || {};

this["JST"]["ideas/idea"] = function(obj) {obj || (obj = {});var __t, __p = '', __e = _.escape, __j = Array.prototype.join;function print() { __p += __j.call(arguments, '') }with (obj) { if(true){ ;__p += '\n  <div>Hey</div>\n'; } ;}return __p};

这个，无法编译：

<div><%= this.id; %></div>

Answer 1

对于遇到此问题的任何其他人，答案都在评论中引用的github问题中。 [github.com/gruntjs/grunt-contrib-jst/issues/29] 答案是：

如果要像_.template一样解析模板，则不得覆盖templateSettings。

所以我改变了这个：

      jst: {
        compile: {
          options: {
             templateSettings: {
               interpolate : /\{\{(.+?)\}\}/g
             }
          },
          files: {
            "<%= buildDir %>/templates.js": ["source.html"]
          }
        }
      }

到此：

      jst: {
        compile: {
          options: {

          },
          files: {
            "<%= buildDir %>/templates.js": ["source.html"]
          }
        }
      }

Answer 2

我想我发现了你的错误：

<!-- IDEA START -->
<div class="ideadata" data-id="<%= id %>"

不应该是<%= this.id %>吗？如果找不到id，那么它将为空，因此您将打开=，这可能会导致错误？

Grunt无法编译JST

2 个答案: