{"id":1483,"date":"2022-08-30T15:16:54","date_gmt":"2022-08-30T15:16:54","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2013\/11\/23\/ember-handlebars-template-does-not-work-after-it-initially-loads-collection-of-common-programming-errors\/"},"modified":"2022-08-30T15:16:54","modified_gmt":"2022-08-30T15:16:54","slug":"ember-handlebars-template-does-not-work-after-it-initially-loads-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2022\/08\/30\/ember-handlebars-template-does-not-work-after-it-initially-loads-collection-of-common-programming-errors\/","title":{"rendered":"Ember Handlebars template does not work after it initially loads-Collection of common programming errors"},"content":{"rendered":"

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:<\/p>\n

Uncaught Error: Cannot perform operations on a Metamorph that is not in the DOM.<\/code><\/p>\n

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<\/p>\n

Here is the Route when the error is displayed:<\/p>\n

App.BadgeBasicRoute = Ember.Route.extend({  \nmodel: function(params) {\n       return this.modelFor('badge');\n    }   \n}) \n<\/code><\/pre>\n
and its parent route:<\/p>\n
App.BadgeRoute = Ember.Route.extend({\n\n   model: function(params) {\n      return this.store.find('badge',params.badge_id); \n   },\n   afterModel: function(params) {\n      return this.transitionTo('badge.basic', params)\n   }\n\n});\n<\/code><\/pre>\n
and here are the templates:<\/p>\n
BadgeBasic.hbs<\/strong><\/p>\n
     \n         \n              <\/code><\/pre>\n
Basic Info<\/code><\/h3>\n
\n             \n             \n                 \n                     <\/pre>\n
Tag Line<\/code><\/h4>\n
\n                 \n                 {{! test comment }}\n                 {{#view App.EditTagLineView}}\n                     <\/pre>\n
<\/h4>\n
\n                 {{\/view}}\n             \n             
\n                 {{#if isEditingTagLine}}         \n\n                     {{view Ember.TextField valueBinding=\"short_description\" class=\"form-control\" style=\"padding-top:10px\"}}\n                     \n                     Save         \n\n                 {{else}}         \n\n                     {{#if short_description}}         \n\n                         {{short_description}}         \n\n                     {{else}}         \n\n                         No tag line provided         \n\n                     {{\/if}}         \n\n                 {{\/if}}\n             \n             \n             \n                 <\/pre>\n
Description<\/code><\/h4>\n
 \n             \n                 {{#view App.EditDescriptionView}}\n                     <\/pre>\n
<\/h4>\n
\n                 {{\/view}}\n             \n             
\n                 {{#if isEditingDescription}}\n                     {{view Ember.TextArea valueBinding=\"full_description\" class=\"form-control\" rows=\"6\"}}\n                     \n                     Save \n                      More on Markdown \n                 {{else}}\n                     {{#if full_description}}\n                         {{markdown full_description}}\n                     {{else}}\n                         no description provided\n                     {{\/if}}\n                 {{\/if}}\n                 \n         \n     \n     \n         \n             <\/pre>\n
Mentor<\/code><\/h4>\n
 \n         \n         \n         <\/pre>\n
<\/h4>\n
\n         \n     \n             {{#if mentor}}\n             \n                 {{log mentor}}\n                  {{mentor.employee_preferred_name}}<\/strong>\n                 
\n                 {{#if mentor.phone}}\n                 P: {{mentor.phone}} 
\n                 {{else}}\n                  no phone number provided <\/small> 
\n                 {{\/if}}\n                 {{#if mentor.email}}\n                 E: {{mentor.email}}\n                 {{else}}\n                  no email number provided <\/small> 
\n                 {{\/if}}\n                      \n\n             {{\/if}}\n              \n<\/pre>\n
Category.hbs<\/strong><\/code><\/p>\n
    \n        <\/code><\/code><\/pre>\n
    \n
  • New<\/code><\/li>\n
    {{#each badge in badges}} {{#link-to “badge” badge tagName=”li”}}<\/p>\n
    {{badge.type}}<\/code><\/h6>\n
    {{badge.title}}<\/strong><\/code><\/h4>\n
    {{badge.short_description}}<\/code><\/p>\n
    {{\/link-to}} {{else}}<\/p>\n
    No Badges in {{label}}<\/code><\/p>\n
    {{\/each}}<\/ul>\n
    \n    \n    \n        {{outlet}}\n    \n<\/pre>\n
    Categories.hbs<\/strong><\/code><\/p>\n
        \n        <\/code><\/code><\/pre>\n
      {{#each category in model}} {{#if category.parent}} {{else}}<\/p>\n
    • {{category.label}}<\/code><\/li>\n
      {{#if category.children}} {{#each child in category.children}} {{#link-to ‘category’ child tagName=”li”}} {{child.label}} {{\/link-to}} {{\/each}} {{\/if}} {{\/if}} {{\/each}}<\/ul>\n
      \n    \n    {{outlet}}\n<\/pre>\n
      Let me know if you need any other information. Any help would be greatly appreciated.<\/code><\/p>\n
        \n
      1. \n
        I ended up rebuilding the badgeBasic.hbs<\/strong> file and it turns out there were unmatched html tags. I do not know why this fixed it but it did.<\/code><\/p>\n<\/li>\n
      2. \n
        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:<\/code><\/p>\n
        \n<\/code><\/code><\/pre>\n<\/li>\n<\/ol>\n
        Originally posted 2013-11-23 09:50:10. <\/small><\/p>","protected":false},"excerpt":{"rendered":"
        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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1483","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1483","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=1483"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1483\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=1483"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=1483"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=1483"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}