Dynamic ID for ItemView

1,310 views
Skip to first unread message

AndyL

unread,
Oct 4, 2012, 10:05:00 PM10/4/12
to backbone-...@googlegroups.com
I'm using a composite view to generate an HTML table.  My ItemView uses a tagName: 'tr' and className: 'rowStyle'.  So far so good.

Now I'd like the view to insert a unique ID into each of the generated ItemViews.  I'm not sure how to do this.

I tried setting the 'id' addribute in my ItemView like so:  id: "model_#{@model.get('id')}" But this doesn't work.

What is a quick/simple way to set a dynamic id in an ItemView ??

Tx, Andy

Stratos Pavlakis

unread,
Oct 5, 2012, 3:50:33 AM10/5/12
to backbone-...@googlegroups.com
Hi Andy,

Shouldn't the id you want to generate be part of the template?

Derick Bailey

unread,
Oct 5, 2012, 9:49:05 AM10/5/12
to backbone-...@googlegroups.com

On Friday, October 5, 2012 at 2:50 AM, Stratos Pavlakis wrote:

Hi Andy,

Shouldn't the id you want to generate be part of the template?

if you want the id to show up on the view's "el" directly, then no. you can't modify the el from the template.

 

On Friday, October 5, 2012 5:05:01 AM UTC+3, AndyL wrote:
I'm using a composite view to generate an HTML table.  My ItemView uses a tagName: 'tr' and className: 'rowStyle'.  So far so good.

Now I'd like the view to insert a unique ID into each of the generated ItemViews.  I'm not sure how to do this.

I tried setting the 'id' addribute in my ItemView like so:  id: "model_#{@model.get('id')}" But this doesn't work.

What is a quick/simple way to set a dynamic id in an ItemView ??

Tx, Andy


Backbone itself doesn't really support this very well. You can see in the source code for Backbone.View that it just looks for the raw value as the id: http://backbonejs.org/docs/backbone.html#section-159

one option, which might not be very elegant, would be to use the initialize method.

initialize: function(){
  this.$el.prop("id", "model_" + this.model.get("id"));
}

  -derick

AndyL

unread,
Oct 5, 2012, 10:43:30 AM10/5/12
to backbone-...@googlegroups.com
My solution was to insert the Item-ID in the 'appendHtml' method of the Composite View.

appendHtml: (collectionView, itemView, index) ->
  itemView.$el.attr('id', 'model_' + itemView.model.get('id'))
  collectionView.$('tbody').append(itemView.el)


This works - but feels like it violates some design principle - I would be happier if I could set the id from within the ItemView.


Ruben Vreeken

unread,
Oct 5, 2012, 11:27:17 AM10/5/12
to backbone-...@googlegroups.com
I think derrick's suggestion is better then. Considering the ID of the model inside the ItemView is higly unlikely to change, you might as well set it in the initializer.
That way you don't have to make an extra change to the dom each time your ItemView renders, the ID gets set just once, and that's it.




--
You received this message because you are subscribed to the Google Groups "Backbone.Marionette" group.
To post to this group, send email to backbone-...@googlegroups.com.
To unsubscribe from this group, send email to backbone-marion...@googlegroups.com.
Visit this group at http://groups.google.com/group/backbone-marionette?hl=en.
To view this discussion on the web visit https://groups.google.com/d/msg/backbone-marionette/-/76LBsjWGVJcJ.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

AndyL

unread,
Oct 5, 2012, 1:34:48 PM10/5/12
to backbone-...@googlegroups.com
Yes - derrick's suggestion is better and it works - thanks.
Reply all
Reply to author
Forward
0 new messages