Question

Is it possible to have a CollectionView render a <ul> container, with it’s items as <li>‘s, and insert a static <li> item in at the end? We are iterating over an array of objects that are rendered as links, and would like a “new” link to be inserted at the end of the list.

Answer 1

MyApp.TheView = Ember.CollectionView.extend({
  content: [1, 2, 3, 4],
  tagName: 'ul',
  itemViewClass: Ember.View.extend({
    tagName: 'li',
    template: Ember.Handlebars.compile("{{view.content}}")
  }),
  didInsertElement: function() {
    this.pushObject(Ember.View.create({
      tagName: 'li',
      template: Em.Handlebars.compile("<button>NEW</button>")
    }));
  }
})

This should help…