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

是的，它的正确行为 - 你试图通过模型视图渲染集合。集合没有属性颜色，你有一个错误。结帐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>

Backbone下划线模板不起作用

2 个答案: