jsp code not executing in backbone.js view

Question

I am trying to execute jsp code from my backbone view. I am calling server side api from my Html as follows

index.jsp (sample.js is included in this jsp)

%@ page contentType="text/html;charset=UTF-8"
         import="foo.*,java.util.List"

%>
<%

            Foo foo = new Foo();
            List<XYZ> xyzList = foo.getList();

%>

I am using backbone framework. My js code is as below.

sample.js

SampleView = Backbone.ModalView.extend(
        {
        name: "SampleView",
        model: SomeModel,
        templateHtml : "<div ><span>Search </span>" +
                "<table border='1'>"+
                "<thead>"+
                "<tr>"+
                        "<td></td>"+
                        "<th>header1</th>"+
                        "<th>header2</th>"+
                        "<th>header3</th>"+
                "</tr>"+
                "</thead>"+
                "<tr>"+
                     "<% for(XYZ xyz: xyslist ){   %>"+
                     "<td><input type='checkbox' value='<%= xyz.getName()%>'></td>"+
                     "<td name='selected'><%= xyz.getName()%></td>"+
                     "<td></td>"+
                     "<td></td>"+
                    "<% } %>"+
                "</tr>"+
                "<tr>"+
                "<td><input type='checkbox' value='test'></td>"+
                     "<td name='selected'>test</td>"+
                     "<td></td>"+
                     "<td></td></tr>"+
                "</table><button id='select'>Select</button></div>",


                initialize: function(){
                _.bindAll( this, "render");
                                this.template = _.template( this.templateHtml);
                        },
        events: {
                "click #select": "select"
                        },
                select: function(){
                         //implementation

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

The problem is, it does not execute jsp code. It displays only 'test' checkbox which is hardcoded and does not retrieve the list from server side. can you please tell me if I am missing anything here? Thanks.

Answer 1

The <% and %> tags used in JSP are also used by the underscore template engine. Why are you using a template in your view, when you do not have any variables to supply?

When trying to run your code, the underscore template engine gives me an "Unexpected identifier", because the <% and %> does not contain valid JavaScript code for it to process.

Instead of

$(this.el).html( this.template());

you should insert the HTML string directly, like this

$(this.el).html(this.templateHtml);