BackboneJs- How to render html template from the view controller in backbone

Question

I am looking to render a table from the view controller using the data in the list.html. below is my View.js file:

function($, _, Backbone, SubAccountCollection){
    var AccountList = Backbone.View.extend({
        tagName: "div",
        el:'#sub-account-list', 
        initialize: function(){

        },
        render: function(id){
            console.log('inside the account list ' + id);
            var self = this;
            var accountList = new SubAccountCollection([],{ id: id });

            accountList.fetch({
                success: function(accnlist){
                    var template = _.template($('#listall').html({accnlist:accnlist.models}) 
                }
            );
        }

    });
    return AccountList;
});

The sub-account-list is the div container or a placeholder for my data. The $('#listall') has a <table> that list the view. Below is the list.html:

<script type = "text/template" id ="listall">
<table>
    <tr><td>Name</td>
        <td>Users</td>
    </tr>
    <tbody>
        <% _.each(accountList, function(account) { %>
            <tr>
                <td><%= account.get('name') %></td>
                <td><%= account.get('users') %></td>
            </tr>
        <% }) %>
    </tbody>
      </table>
 </script>

So now obviously its not rendering anything and when i tried debugging, it gave an undefined on $('#listall').html(). when i try to access the _.template($('#listall').html(), {accnlist:accnlist.models}), it throws 'Cannot find replace of undefined', which means its not able to find the $('#listall').html(). How can i access the element, so that it does not throw this error. Waht im i doing wrong in getting the values form the DOM. I've been stuck on this for a while, anyone has any ideas?

EDIT:::::

var ProjectListView = Backbone.View.extend({
        template: _.template($("#listall").html()),
        initialize: function(options){
           this.id = options.id;
           this.collection = new ProjectsCollection();
           this.listenTo(this.collection, "sync", this.render);
           this.collection.fetch();
        },
        el: "#container",
       render: function(){

       var template = this.template({projectlists: this.collection.toJSON()});
        this.$el.html(template)
           }
     });
   var accountList = new AccountList({

  });
 return ProjectListView;
});

list.html

<table>
    <tr><td>Name</td>
        <td>Users</td>
    </tr>
    <tbody>
        <% _.each(accnlist, function(account,idx) { %>
             <tr>
                <td><%= account.name %></td>
                <td><%= account.users %></td>
            </tr>
        <% }) %>
    </tbody>
      </table>

Above is the code suggested by Ofer in the fiddle that i tried, but i have no clue why would it say "undefined" on $('#listall').html(). I'm totally missing something minor that im not able to figure out.

Answer 1

Your first _.template function, returns a function which accepts the model, you can avoid this by calling it once _.template("template",{model object})

        accountList.fetch({
            success: function(accnlist){
                var template = _.template($('#listall').html(), {accnlist:accnlist.toJSON()});
            }
        );
    }