Rails - 如何将下划线模板从 html 文件链接到 coffescript 文件？

Question

我有两个文件： 更新： 我用整个代码更新了文件，所以也许有人可以看到为什么没有使用模板。也许我错过了一些东西。 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>

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

附：我正在使用 Rails 4

Answer 1

Collection#fetch 没有为success 回调设置任何特定上下文，因此当您尝试$(@el).html(template) 时，@ 可能是window。 Fat-arrow那个回调，你应该有更好的结果：

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>
 <%% }); %>

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