0

我有两个文件: 更新: 我用整个代码更新了文件,所以也许有人可以看到为什么没有使用模板。也许我错过了一些东西。具有此视图的 script.js.coffee(使用 Backbone.js):

 window.Book = Backbone.Model.extend(url: ->
    (if @id then "/books/" + @id else "/books")
  )

  Router = Backbone.Router.extend(routes:
    "": "home"
    new: "editBook"
    "edit/:id": "editBook"
  )


  Books = Backbone.Collection.extend(model: Book)
  books = new Books()
  books.url = "books.json"



  BooksView = Backbone.View.extend(
    el: ".books"
    render: ->
      books = new Books()
      books.fetch success: =>
        template = _.template($("#book-list-template").html(),
          books: books.models
        )
        @$el.html template
        console.log template
  )

还有另一个文件 index.html.erb

有这个模板:

<div id="main">
<h1>Books list</h1>
<div class="books"></div>
 <script type="text/template" id="book-list-template">
    <a href="#new" class="btn btn-primary">New Book</a>
    <table class="table striped">
      <thead>
        <tr>
          <th>Title</th>
          <th>Author</th>
          <th>Year</th>
          <th></th>
         </tr>
       </thead>
       <tbody>
        <%% _.(books).each(function(book) { %>
          <tr>
            <td><%%= book.title  %></td>
            <td><%%= book.author  %></td>
            <td><%%= book.year  %></td>
            <td><a href="#/edit/<%%= book.id %>" class="btn">Edit</a></td>
          </tr>
        <%% }); %>
       </tbody>
     </table>
  </script>  

</div>

但它没有显示任何内容(也没有给出任何错误)。对我来说,看起来咖啡文件看不到模板在哪里?有没有办法简单地显示它在哪里?还是我错过了什么?

PS我正在使用rails 4

4

1 回答 1

0

Collection#fetch没有为success回调设置任何特定的上下文,所以@window你尝试$(@el).html(template). 那个回调的胖箭头,你应该有更好的结果:

books.fetch success: =>
  template = _.template($("#book-list-template").html(),
    books: books.models
  )
  @$el.html template

您也可以使用该版本的缓存$(@el)版本@$el


当我在这里时,您通常使用toJSON为您的模板序列化您的集合:

template = _.template($("#book-list-template").html(), books.toJSON())

然后在您的模板中:

<%% _(books).each(function(book) { %>
   <tr>
     <td><%%= book.title  %></td>
     <td><%%= book.author %></td>
     <td><%%= book.year   %></td>
     <td><a href="#/edit/<%%= book.id %>" class="btn">Edit</a></td>
   </tr>
 <%% }); %>

这种方法可以帮助您避免意外修改模板内的真实数据。

于 2013-10-28T20:03:06.190 回答