Question

I have the following Backbone (in coffeescript) view where i pass an array and try to append each item to the el. However, I keep coming up with an empty el.

ItemTagList = Backbone.View.extend
  className  : "itemTagsContainer"
  initialize : (tags) ->
    this.render(tags.taglist)

  render: (taglist) ->
    taglist.forEach (tag) ->
      tag_span = _.template($("#tag").html(), {tag : tag} )
      $(this.el).append(tag_span)
      console.log(tag)

The template $("#tag") looks like this:

<a class='tag' href="/items?tagged_with=<%= tag =>"><%= tag =></a>

Upon rendering, the above will correctly iterate over the taglist, so I know that the taglist is properly passed to the Backbone View, as well as to the render function.

But if I do the following

itemTagList = new ItemTagList
  taglist : ["Tag1", "Tag2"]

console.log(itemTagList.el)

I always get the empty el, i.e.

 <div class="itemTagsContainer"></div>

instead of

 <div class="itemTagsContainer">
   <a class='tag' href="/items?tagged_with=Tag1">Tag1</a>
   <a class='tag' href="/items?tagged_with=Tag2">Tag2</a>
 </div>

which is what I was hoping to get.

Can anyone help?

Answer 1

You just have a context problem inside your forEach callback function; the @ (AKA this) will be the global object (window in a browser) so this.el isn’t what you think it is. You can get around this by using a fat-arrow (=>) when defining your callback function:

render: (taglist) ->
  taglist.forEach (tag) =>
    tag_span = _.template($("#tag").html(), tag: tag)
    @$el.append(tag_span)
    console.log(tag)

I’ve also switched to @$el since your view will already have a cached version of $(@el).

The context in a forEach callback depends on what mode you’re in:

If a thisArg parameter is provided to forEach, it will be used as the this value for each callback invocation as if callback.call(thisArg, element, index, array) was called. If thisArg is undefined or null, the this value within the function depends on whether the function is in strict mode or not (passed value if in strict mode, global object if in non-strict mode).

I’d recommend using => so that you don’t have to worry about it; alternatively, you could use the thisArg:

taglist.forEach (tag) -> ...., @

but that tends to be a bit ugly and cumbersome in CoffeeScript.