Question

我正在尝试使用骨干在页面上显示API调用的结果，我想迭代集合并在我的html中为集合的每个元素创建一个条目。似乎我错过了什么，因为我看到模板标签已呈现，但我的项目都没有。我的代码有什么问题？

这里是html

<div class="form-group" id="main">
 <% _.each(collection, function(car) { %>
  <div class="form-group">
    <input class="form-control" /><%= car.get("model") %>
  </div>
 <% }); %>
</div>

这里是js

var CarView = Backbone.View.extend({
    el: "#main",
    template: _.template($("#main").html()),
    initialize: function() {
        this.render();
    },
    render: function() {
        $(this.el).html(this.template({collection: [{id:1, model:"ford"}, {id:2,model:"kia"}]}));
        return this;
    }
});

var carView = new CarView();

这里是小提琴：https://jsfiddle.net/e5hg6rzp/3/

Answer 1

首先，我建议您将模板保存在<script type='text'/template> ... </script>标记中。其次，您在模板中使用.get()方法在没有此方法的普通对象上。在您的示例中，您可以通过. -

访问媒体资源

 <div class="form-group">
    <input class="form-control" /><%= car.model %>
  </div>

选中此fiddle

如果您想在创建Backbone.Collection和Car Collection时使用Car Model：

＆＃13;

var data = [{
    id: 1,
    model: "ford"
}, {
    id: 2,
    model: "kia"
}];

var CarView = Backbone.View.extend({
    el: "#main",
    template: _.template($("#templ").html()),
    initialize: function() {
        this.render();
    },
    render: function() {
        return this.$el.html(this.template(new CarCollection(data)))
    }
});

var CarModel = Backbone.Model.extend({
    defaults: {
        id: '',
        model: ''
    }
})

var CarCollection = Backbone.Collection.extend({
    model: CarModel
})

var carView = new CarView();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone.js"></script>

<div class="container">
  <div class="form-inline panel panel-default">
    <div class="form-group" id="main">

    </div>
  </div>
</div>

<script type='text/template' id='templ'>
  <% _.each(models, function(car) { %>
    <div class="form-group">
      <input class="form-control" />
      <%= car.get('model') %>
    </div>
    <% }); %>
</script>

＆＃13;

骨干和下划线模板渲染

1 个答案: