骨幹強調模板不工作

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 Console選項卡中。我在這裏錯過了什麼？

編輯：新的代碼按張貼的鏈接：

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，並且您有錯誤。結帳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

最後，我是不會產生額外的視圖尋找答案：

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>