How to avoid template wrapping with empty div in Backbone?
backbone.js, javascript, jquery
Solution
I think the real answer to this question has not been provided yet, simply remove the `div` from the template and add the `className` property to `JobView`! This will result in the markup you require:
The template:
<script id="contactTemplate" type="text/html">
<h1><%= title %>/<%= type %></h1>
<div><%= description %></div>
</script>
The view:
var JobView = Backbone.View.extend({
className: 'job', // this class will be added to the wrapping div when you render the view
template:_.template($("#contactTemplate").html()),
initialize:function () {
this.render();
},
render:function () {
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
When you call `render` you will end up with the desired markup:
<div class="job">
<h1><%= title %>/<%= type %></h1>
<div><%= description %></div>
</div>
Problem
When I create view backbone creates empty div-container if el is not set. Template `(this.$el.html(this.template(this.model.toJSON())))` inserted in that div. How to avoid this wrapper? I need clean template without any wrappers so I can insert it anywhere I want? It's not reasonable to call `jobView.$e.children()` with many elements. ``` <script id="contactTemplate" type="text/html"> <div class="job"> <h1><%= title %>/<%= type %></h1> <div><%= description %></div> </div> </script> var JobView = Backbone.View.extend({ template:_.template($("#contactTemplate").html()), initialize:function () { this.render(); }, render:function () { this.$el.html(this.template(this.model.toJSON())); return this; } }); var jobView = new JobView({ model:jobModel }); console.log(jobView.el); ```