Ember Handlebars template does not work after it initially loads-Collection of common programming errors

3 years ago
admin
2 minutes

I recently went from ember rc8 to 1.0.0 and to ember-data beta-2. When I did this, there were several error messages but this one I cannot figure out:

Uncaught Error: Cannot perform operations on a Metamorph that is not in the DOM.

I am currently in the process of getting into a jsbin to debug but in the meantime I created this album to demonstrate what is going on : Album

Here is the Route when the error is displayed:

App.BadgeBasicRoute = Ember.Route.extend({  
model: function(params) {
       return this.modelFor('badge');
    }   
})

and its parent route:

App.BadgeRoute = Ember.Route.extend({

   model: function(params) {
      return this.store.find('badge',params.badge_id); 
   },
   afterModel: function(params) {
      return this.transitionTo('badge.basic', params)
   }

});

and here are the templates:

BadgeBasic.hbs

Basic Info

Tag Line

                 
                 {{! test comment }}
                 {{#view App.EditTagLineView}}
                     

                 {{/view}}
             
             

                 {{#if isEditingTagLine}}         

                     {{view Ember.TextField valueBinding="short_description" class="form-control" style="padding-top:10px"}}
                     
                     Save         

                 {{else}}         

                     {{#if short_description}}         

                         {{short_description}}         

                     {{else}}         

                         No tag line provided         

                     {{/if}}         

                 {{/if}}

Description

 
             
                 {{#view App.EditDescriptionView}}
                     

                 {{/view}}
             
             

                 {{#if isEditingDescription}}
                     {{view Ember.TextArea valueBinding="full_description" class="form-control" rows="6"}}
                     
                     Save 
                      More on Markdown 
                 {{else}}
                     {{#if full_description}}
                         {{markdown full_description}}
                     {{else}}
                         no description provided
                     {{/if}}
                 {{/if}}

Mentor

 
         
         
         

         
     
             {{#if mentor}}
             
                 {{log mentor}}
                  {{mentor.employee_preferred_name}}
                 

                 {{#if mentor.phone}}
                 P: {{mentor.phone}} 

                 {{else}}
                  no phone number provided  

                 {{/if}}
                 {{#if mentor.email}}
                 E: {{mentor.email}}
                 {{else}}
                  no email number provided  

                 {{/if}}
                      

             {{/if}}

Category.hbs
  • New

    • {{#each badge in badges}} {{#link-to “badge” badge tagName=”li”}}

    {{badge.type}}

    {{badge.title}}

    {{badge.short_description}}

    {{/link-to}} {{else}}

    No Badges in {{label}}

    {{/each}}

    
    
        {{outlet}}

Categories.hbs
    {{#each category in model}} {{#if category.parent}} {{else}}

  • {{category.label}}

    • {{#if category.children}} {{#each child in category.children}} {{#link-to ‘category’ child tagName=”li”}} {{child.label}} {{/link-to}} {{/each}} {{/if}} {{/if}} {{/each}}

    
    {{outlet}}

Let me know if you need any other information. Any help would be greatly appreciated.

  1. I ended up rebuilding the badgeBasic.hbs file and it turns out there were unmatched html tags. I do not know why this fixed it but it did.

  2. I've run into this a time or two in the past and it's almost always been due to wrapping some handlebars directive in regular html comments. Something like:

Originally posted 2013-11-23 09:50:10.