CODEWITHSUNDEEP
ember.js
herom
herom

Reputation: 2542

Ember.View - How to append another Ember.View to a jQuery HTML element the right way?

Within Ember.View is it possible to do something like this:

App.ExperimentalView = Ember.View.extend({
  templateName: 'experimental/table',

  click: function (event) {
    var $target = $(event.target).closest('tr'),
        anotherView = Ember.View.create({
          templateName: 'experimental/appendableRow'
        };

    anotherView.appendTo($target);
  }
});

to add a <tr/> which has it's HTML markup defined within a Handlebars template only if the element is clicked?

First I thought of using an Ember.ContainerView but then I reread the docs and stumbled upon this sentence:

The HTML contents of a Ember.ContainerView's DOM representation will only be the rendered HTML of its child views.

which lead me to the assumption that I would need an Ember.ContainerView representing my table whith a child view to hold the real <table/> which again has child views and also another Ember.ContainerView object which would represent my table body without actually rendering a <tbody/> element which seems a bit odd imho.

EDIT

Another benefit of this approach would probably be that you'll be able to declare a Ember.Mixin which provides not only methods/properties but also its own Handlebars template. So it would be possible to, let's say, create something like a FilterableViewMixin with the HTML markup for the filter and everything and you just would have to implement and reset the filter entries.

Upvotes: 2

Views: 120

Answers (1)

Gevious
Gevious

Reputation: 3252

I'd do it slightly differently. In the template experimental/table add the snippet contained in experimental/appendableRow and wrap it in an if statement. Then if the user clicks on the table row, the view can delegate the click to the controller, which will toggle the condition, and thereby display the experimental/appendableRow snippet.

Upvotes: 3

Related Questions