骨干下划线模板不起作用

Question

这是我在HTML标签中的JSFiddle代码：

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

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

这是我的JavaScript代码：

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();

当我运行这段代码时，我得到

SyntaxError: syntax error

= Color

在Firebug控制台标签中。 我在这里想念什么？

编辑：根据发布的链接的新代码：

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

是的，它的正确行为-您试图通过模型视图渲染集合。 集合没有属性Color，并且您有一个错误。 结帐小提琴

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

最后，我一直在寻找的答案没有创建其他视图：

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>