Backbone.js turning off wrap by div in render

Question

I have model Post and collection Posts. And want to make form with list of all post in <select id="multi" multiple="multiple">. So i have to make a PostView render inside my #multi with just this template:

<option value=""><%= title %></option>

But finally I get it wrapped with div. Is there any solution for not wrapping this template with <div>?

score 33 · Accepted Answer · edited Mar 18 '13 at 10:07

33

If you don't define an el (or tagName) for the view (in the class or during instantiation) the view will be placed inside a div tag. http://documentcloud.github.com/backbone/#View-el

var PostView = Backbone.View.extend({
  tagName: 'option'
});

UPDATE

Starting v0.9.0, Backbone has view.setElement(element) to get this done.

var PostView = Backbone.View.extend({
    initialize: function() {
        var template = _.template('<option value=""><%= title %></option>');
        var html = template({title: 'post'});
        this.setElement(html);
    }
});

edited Mar 18 '13 at 10:07

Jay Kumar

1,514
1
14
17

answered Oct 25 '11 at 18:59

kreek

8,774
8
44
69

1

I tried this approach too, but can not see a way to pass variable for "value" inside this – BazZy Oct 25 '11 at 19:06
Inside your view you can use jquery to set the value `$(this.el).attr('value', 'something');` – kreek Oct 25 '11 at 19:14
4

or even `this.el.value = 'something'` leave jQuery for where it's needed :) – Tom Tu Oct 28 '11 at 20:58
@TomTu thanks for that, I didn't know you could set it that way :) – kreek Oct 28 '11 at 22:42
2

Is there a way to apply this easily in Marionette? – streetlight Mar 26 '13 at 19:59
setElement will lost rendered items in each loop. – twinsant Nov 20 '13 at 02:05
The link is not valid anymore could you please change it – AurA Dec 08 '16 at 06:00

score 18 · Answer 2 · edited Jan 19 '12 at 22:53

18

If you don't want to have the view wrap your HTML, you'll have to do a few things:

Replace this.el entirely
Call delegateEvents on the new el

render: function(){
  var html = "some foo";
  this.el = html;
  this.delegateEvents(this.events);
}

Since Backbone generates a div or other tag (based on your tagName setting for the view), you have to replace it entirely. That's easy to do. When you do that, though, you lose your declared events because Backbone uses jQuery's delegate under the hood to wire them up. To re-enable your declared events, call delegateEvents and pass in your events declarations.

The result is that your view.el will be the <option> tag that you want, and nothing more.

edited Jan 19 '12 at 22:53

John

29,546
11
78
79

answered Oct 25 '11 at 19:16

Derick Bailey

72,004
22
206
219

Thanks a lot for your help, Derick. I will use your advice in my future projects/ – BazZy Oct 26 '11 at 12:48
you don't have to pass this.events to delegateEvents, it will default to that. – troynt Nov 06 '11 at 05:25
8

there is a function for this in the latest version of BB - [view.setElement(html)](http://documentcloud.github.com/backbone/#View-setElement) – zihotki Mar 27 '12 at 12:17
Is there a way to implement this in regions in Marionette? – streetlight Mar 26 '13 at 23:24

score 4 · Answer 3 · answered Mar 04 '13 at 03:00

4

In version 0.9.0, Backbone introduced view.setElement(element) to handle this operation.

answered Mar 04 '13 at 03:00

Stephen Watkins

25,047
15
66
100

Backbone.js turning off wrap by div in render

3 Answers3

Linked