Backbone js template is not loading through dynamic jsp

Question

I'm using backbone js for my project where I render a view like this---

      var View1 = Backbone.View.extend({
        el: "#container",
        initialize: function (){
            this.render();
        },

        render: function(){
            var parent = this;

            $.get('http://localhost:8080/pages/task.jsp').done(function (data){
                parent.$el.html(data);
                var view = new ViewTask1()
            })
        }
    });

Inside task.jsp , I have a template that i wish to render separately. The file looks something like this,..

<ul class="list-group">
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-primary">A simple primary list group item</li>

</ul>


<div id="abc"></div>

<script type="text/template" id="task-card-template">
    <div class="card" style="width: 18rem;">
        <img class="card-img-top" src="..." alt="Card image cap">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
    </div>
</script>

Then i insert some data into a collection, map the collection to a model and try to render this template as follows:

//Create Task View
var TaskView = Backbone.View.extend({
    initialize : function() {
        this.render();
    },

  template: _.template($('#task-card-template').html()),

  render: function() {
    this.$el.html(this.template(this.model.attributes));
    return this;
  }

});

var ViewTask1 = Backbone.View.extend({
    el : "#abc",
    initialize : function() {
        this.render();
    },
    render : function() {
         this.$el.html('');

         Tasks.each(function(model) {
            var task = new TaskView({
                model : model
            });

            this.$el.append(task.render().el);
        }.bind(this));

        return this;
    },
});

Yet i get the error saying, TypeError: Cannot read property 'replace' of undefined at Function.h.template from underscore js. At first, i thought maybe the jsp is not loaded or View1 is not rendered before the calling the template views(ViewTask) , but as I have checked it is being called after the JSP is fully rendered. My question is How do i load templates from inside the views?

Answer 1

You are on the right track... it looks like you are defining your template function inside TaskView right at pageload, before your ajax has a chance to add the needed html to your page. Even though you don't create any instances of TaskView before the ajax completes, the view definition is still trying to use that html right away.

I think you have two possible solutions: (1) Define your template function inside the initialize or render method which won't exectute until you have an instance. Or (2) put the html somewhere right on your page (in a hidden div maybe) so that it can be fetched right away.

Solution (1) might look a bit like this:

var TaskView = Backbone.View.extend({
    initialize: function() {
        this.render();
    },
    // no template method yet
    render: function() {
        // inside render method, define template method if not already defined
        if (!this.template) {
            this.template = _.template($('#task-card-template').html());
        }
        this.$el.html(this.template(this.model.attributes));
        return this;
    }
});