初始加载后,Ember Handlebars模板不起作用

时间:2013-09-05 20:34:05

标签: javascript ember.js ember-data

我最近从ember rc8转到了1.0.0并进入了ember-data beta-2。当我这样做时,有几条错误信息,但这个我无法弄清楚:

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

我目前正在进入jsbin进行调试,但与此同时我创建了这张专辑来演示正在发生的事情:Album

以下是显示错误时的路线:

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

及其父路线:

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)
   }

});

以下是模板:

BadgeBasic.hbs

     <div class="row">
         <div class="col col-lg-12">
              <h3>Basic Info</h3>
             <hr>
             <div class="row page-header-title">
                 <div class="col col-lg-11">
                     <h4>Tag Line</h4>
                 </div>
                 {{! test comment }}
                 {{#view App.EditTagLineView}}
                     <h4 {{bindAttr class=":glyphicon isEditingTagLine:glyphicon-nothing:glyphicon-pencil :edit-button"}}></h4>
                 {{/view}}
             </div>
             <p>
                 {{#if isEditingTagLine}}         

                     {{view Ember.TextField valueBinding="short_description" class="form-control" style="padding-top:10px"}}
                     <hr>
                     <button {{action saveTagLine}} class="btn btn-success">Save</button>         

                 {{else}}         

                     {{#if short_description}}         

                         {{short_description}}         

                     {{else}}         

                         No tag line provided         

                     {{/if}}         

                 {{/if}}
             </p>
             <div class="row page-header-title">
             <div class="col col-lg-11">
                 <h4>
                     Description
                 </h4>
             </div>
                 {{#view App.EditDescriptionView}}
                     <h4 {{bindAttr class=":glyphicon isEditingDescription:glyphicon-nothing:glyphicon-pencil :edit-button"}}></h4>
                 {{/view}}
             </div>
             <p>
                 {{#if isEditingDescription}}
                     {{view Ember.TextArea valueBinding="full_description" class="form-control" rows="6"}}
                     <hr>
                     <button {{action saveDescription}} class="btn btn-success">Save</button> 
                     <a href="http://daringfireball.net/projects/markdown/syntax" target="new" class="btn btn-link"><span class="glyphicon glyphicon-info-sign"></span> More on Markdown </a>
                 {{else}}
                     {{#if full_description}}
                         {{markdown full_description}}
                     {{else}}
                         <span class="text-muted">no description provided</span>
                     {{/if}}
                 {{/if}}
                 </p>
         </div>
     </div>
     <div class="row page-header-title" >
         <div class="col col-lg-11">
             <h4>
                 Mentor
             </h4>
         </div>
         <div class="col col-lg-1">
         <h4 class="glyphicon glyphicon-pencil edit-button"></h4>
         </div>
     </div>
             {{#if mentor}}
             <address>
                 {{log mentor}}
                 <strong> {{mentor.employee_preferred_name}}</strong>
                 <br>
                 {{#if mentor.phone}}
                 <abbr title="Phone">P:</abbr> {{mentor.phone}} <br>
                 {{else}}
                 <small> no phone number provided </small> <br>
                 {{/if}}
                 {{#if mentor.email}}
                 <abbr title="Email">E:</abbr> {{mentor.email}}
                 {{else}}
                 <small> no email number provided </small> <br>
                 {{/if}}
             </address>         

             {{/if}}
     </div>         

Category.hbs

    <div class="col col-lg-3 menu2">
        <ul style="">
            <li class="menu2-header">
                <button style="background:#5E9EF3;border:none" class="btn btn-sm btn-primary">New</button>
            </li>
            {{#each badge in badges}}
                {{#link-to "badge" badge tagName="li"}}
                    <h6 style="">
                        {{badge.type}}
                    </h6>
                    <h4 style="">
                        <strong>{{badge.title}}</strong>
                    </h4>
                    <p>
                        {{badge.short_description}}
                    </p>
            {{/link-to}}
            {{else}}        

                    <p class="lead text-center" style="margin-top:2em">
                        No Badges in {{label}}
                    </p>        

            {{/each}}
        </ul>
    </div>
    <div class="col col-lg-7">
        {{outlet}}
    </div>

Categories.hbs

    <div class="col col-lg-2 menu1">
        <ul>
            {{#each category in model}}
                    {{#if category.parent}}

                    {{else}}
                        <li class="menu1-header" > {{category.label}}  </li>
                        {{#if category.children}}
                            {{#each child in category.children}}
                                {{#link-to 'category' child tagName="li"}}
                                    {{child.label}} 
                                {{/link-to}}
                            {{/each}}
                        {{/if}}
                    {{/if}}
            {{/each}}
        </ul>
    </div>
    {{outlet}}

如果您需要任何其他信息,请与我们联系。任何帮助将不胜感激。

2 个答案:

答案 0 :(得分:0)

我在过去的一两次遇到这种情况,这几乎总是由于在常规的html评论中包含了一些把手指令。类似的东西:

<!--
{{#if something}}hey!{{else}}ho!{{/if}}
-->

答案 1 :(得分:0)

我最终重建了 badgeBasic.hbs 文件,结果发现有无与伦比的html标签。我不知道为什么会修复它,但确实如此。