无法获得Handlebars的简单样本

时间:2013-02-11 15:11:02

标签: javascript json handlebars.js

我有一个简单的Handlebars示例,我无法让它工作!请帮忙。我想让谷歌应用引擎留言簿与把手而不是jinja2

一起使用

HTML /模板代码如下:

    

  Hello {{user.nickname}}
  <h2>Top 10 Most Recent Guestbook Entries</h2>
      {{#each greetings}}
          <br>
           <small>[<i>{{date.ctime}}</i>]</small>
           <b>
             {{#if author}}
               <code>{{author.nickname}}</code>
             {{else}}
               <i>anonymous</i>
             {{/if}}
          </b>
          wrote:
        {{comment}}
      {{/each}}
 </script>
 <div id="comment_content"> </div>
 <form id="comments" action="">
    <div><textarea id="comment" name="content" rows="3" cols="60"></textarea></div>
    <div><input id="comment_button" type="button"  value="submit"></div>
 </form>
 <a href="{{ url }}">{{ url_linktext }}</a>

这是JS代码:

<script>
   $(document).ready(function() {
      var source   = $("#entry-template");
      var srcHTML =source.html();    
      var template = Handlebars.compile(srcHTML);
   // put all your jQuery goodness in here.
      $("#comment_button").click(function(event) {

          var data = JSON.stringify({
            "login": "/_ah/login?continue=http%3A//localhost%3A8080/show",
            "logout": "/_ah/login?continue=http%3A//localhost%3A8080/show&action=Logout",
            "user": {
              "nickname": "dummy",
              "email": "dummy@me.com"
            },
          "greetings": [
          {
            "comment": "COMMENT1",
            "date": {
                "ctime": "Sun Feb 10 23:20:21 2013"
            },
            "author": {
                "nickname": "dummy",
                "email": "dummy@me.com"
            }
          }
        ]
      })
      var html = template(data);
      console.log(html);
      $("#comment_content").html(html);
      });
   });
 </script>

以下是我引用Handlebar源代码的方法

Can someone please help?

非常感谢你

1 个答案:

答案 0 :(得分:0)

您最大的问题是您正在使用JSON.stringify为已编译的模板函数准备数据:

var data = JSON.stringify({ ... });
var html = template(data);

当它只需要对象时,最终会将template函数传递给字符串(这是所需数据的JSON表示)。删除JSON.stringify,事情会开始变得更好:

var data = { ... };
var html = template(data);

演示:http://jsfiddle.net/ambiguous/Axmbd/

此外,这部分HTML:

<a href="{{ url }}">{{ url_linktext }}</a>

似乎不在模板的<script>内,因此{{url}}{{url_linktext}}不会被填写。您可以通过将<a>移到正确的位置。