Rails - How to link underscore template from html file to coffescript file?

Question

I have two files: UPDATE: I updated files with whole code, so maybe someone could see why template is not being used. Maybe I'm missing something. script.js.coffee which has this view (using 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
  )

And another file index.html.erb

having this template:

<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>

But it does not show anything (does not give any errors either).For me it looks like coffee file can not see where is template? Is there a way to simply show it where it is? Or am I missing something?

PS I'm using rails 4

Answer 1

Collection#fetch doesn't set any specific context for the success callback so @ is probably window when you try to $(@el).html(template) . Fat-arrow that callback and you should have better results:

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

You can also use the cached version of $(@el) version of that is in @$el too.

---

And while I'm here, you usually use toJSON to serialize your collection for your template:

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

and then in your template:

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

This approach helps you avoid accidentally modifying your real data inside your template.