backbone 和下划线模板渲染

Question

我正在尝试使用 backbone 在页面上显示 API 调用的结果，我想遍历集合并为集合的每个元素创建一个条目在我的 html 内。似乎我遗漏了一些东西，因为我看到呈现的模板标签，但 none 我的项目在那里。我的代码有什么问题？

这里是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();

这里 fiddle: 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

如果你想在应该创建 Car Collection 和 Car Model 时使用 Backbone.Collection:

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

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

backbone 和下划线模板渲染

backbone and underscore template rendering

backbone.js

underscore.js

underscore.js-templating