Backbone underscore template not working

Question

This is my JSFiddle code in HTML tab:

<script type="text/template" id="vehicleItemTemplate">
    <li><% = Color %> - <% = Type %></li>
</script>

<ul id="vehicles">
</ul>

This is my javascript code:

var Vehicle = Backbone.Model.extend({});
var vehicle1 = new Vehicle({Color:'blue', Type: 'car'});
var vehicle2 = new Vehicle({Color:'blue', Type: 'bike'});
var vehicle3 = new Vehicle({Color:'blue', Type: 'rickshaw'});

var VehicleCollection = Backbone.Collection.extend({ model : Vehicle});
var vehicleCollection = new VehicleCollection([vehicle1,vehicle2,vehicle3]);


var VehicleView = Backbone.View.extend({
    initialize: function(){            
    },
    render: function(){
        this.$el.html( _.template($('#vehicleItemTemplate').html(), vehicleCollection));
    }
});

var vehicleView = new VehicleView({el: "#vehicles", model:vehicleCollection});
vehicleView.render();

When I run this piece of code, I get

SyntaxError: syntax error

= Color

in Firebug Console tab. What am I missing here?

Edit: new code as per the posted link:

var Vehicle = Backbone.Model.extend({});
var vehicle1 = new Vehicle({Color:'blue', Type: 'car'});
var vehicle2 = new Vehicle({Color:'blue', Type: 'bike'});
var vehicle3 = new Vehicle({Color:'blue', Type: 'rickshaw'});

var VehicleCollection = Backbone.Collection.extend({ model : Vehicle});
var vehicleCollection = new VehicleCollection([vehicle1,vehicle2,vehicle3]);


var VehicleView = Backbone.View.extend({
    initialize: function(){            
        this.template = _.template($('#vehicleItemTemplate').html());
        this.collection.bind("reset", this.render, this);
    },
    render: function(){        
        var renderedContent = this.template(this.collection.toJSON());
        this.$el.html( renderedContent);
        return this;
    }
});

var vehicleView = new VehicleView({el: "#vehicles", collection:vehicleCollection});
vehicleView.render();

Answer 1

Yep, its correct behavior - you trying to render collection via model view. Collection doesnt have property Color and you have an error . Checkout fiddle

$(function(){
    var Vehicle = Backbone.Model.extend(),
        VehicleCollection = Backbone.Collection.extend({ model : Vehicle});


    var vehicle1 = new Vehicle({Color:'blue', Type: 'car'}),
        vehicle2 = new Vehicle({Color:'blue', Type: 'bike'}),
        vehicle3 = new Vehicle({Color:'blue', Type: 'rickshaw'}),
        vehicleCollection = new VehicleCollection([vehicle1,vehicle2,vehicle3]);


    var itemView = Backbone.View.extend({
            template: _.template($('#vehicleItemTemplate').html()),
            render: function(){        
                var renderedContent = this.template(this.model.toJSON());
                this.$el.html( renderedContent);
                return this;
            }
        }),
        collectionView = Backbone.View.extend({
            render: function () {
                this.collection.each(this.addOne, this);
                return this;
            },
            addOne: function(mod) {
                var item = new itemView({ model: mod });
                this.$el.append( item.render().el );
            }
        });


    var vehicleView = new collectionView({
        el: "#vehicles", 
        collection:vehicleCollection
    });

    vehicleView.render();
});

Answer 2

Finally the answer that I was looking for without creating an additional View:

var Vehicle = Backbone.Model.extend({});
var vehicle1 = new Vehicle({Color:'blue', Type: 'car'});
var vehicle2 = new Vehicle({Color:'blue', Type: 'bike'});
var vehicle3 = new Vehicle({Color:'blue', Type: 'rickshaw'});

var VehicleCollection = Backbone.Collection.extend({ model : Vehicle});
var vehicleCollection = new VehicleCollection([vehicle1,vehicle2,vehicle3]);


var VehicleView = Backbone.View.extend({
    initialize: function(){            
        this.template = _.template($('#vehicleItemTemplate').html());
        this.collection.bind("reset", this.render, this);
    },
    render: function(){        
        var renderedContent = this.template({vehicles: this.collection.models});
        this.$el.html( renderedContent);
        return this;
    }
});

var vehicleView = new VehicleView({el: "#vehicles", collection:vehicleCollection});
vehicleView.render();

HTML:

<script type="text/template" id="vehicleItemTemplate">    
    <% _.each(vehicles, function(vehicle){ %>
            <li><%=vehicle.get('Color')%> - <%=vehicle.get('Type')%></li>
    <% }); %>
</script>

<ul id="vehicles">
</ul>