emberjs附加工作，但会引发Assertion Failed错误 [英] emberjs append works but raises Assertion Failed error

问题描述

我是新来的，我正在尝试将一个模板附加到另一个模板，似乎有效，但是它会引发错误，错误：

 断言失败：您无法追加到现有的Ember.View。考虑使用Ember.ContainerView而不是
  

这是 app.js 中的代码

  App.NewStickie = Ember.View.extend（{
 click：function（evt））{
 var stickie = Ember.View.create（{
 templateName：'stickie'，
 content：'在这里写下你的笔记'
}）; 
 stickie.appendTo（'＃stickies '）; 
} 
}）; 
  

这些是 index.html

$ b的内容
$ b

 < script type =text / x-handlebars> 
 {{#view App.NewStickie}} 
< button type =buttonclass =btn btn-success> 
新
< / button> 
 {{/ view}} 
 {{outlet}} 
< / script> 
 
< script type =text / x-handlebarsid =index> 
< div id =stickies> 
 {{＃#each item in model}} 
< div class =stickiecontenteditable =true> 
 {{#view App.DeleteStickie}} 
< span class =glyphicon glyphicon-trash>< / span> 
 {{/ view}} 
< div contenteditable =true> 
 {{item.content}} 
< / div> 
< / div> 
 {{/ each}} 
< / div> 
< / script> 
 
< script type =text / x-handlebarsdata-template-name =stickie> 
< div class =stickie> 
 {{#view App.DeleteStickie}} 
< span class =glyphicon glyphicon-trash>< / span> 
 {{/ view}} 
< div contenteditable =true> 
 {{view.content}} 
< / div> 
< / div> 
< / script> 
  

解决方案

ember中的每个视图都有一个模板，例如：

foo_view.js

 应用.FooView = Ember.View.extend（{
 templateName：'foo'
}）
  

foo模板

 < script type =text / x-handlebars -template名= 索引 > 
< div id = myFooView> Foo< / div> 
< / script> 
  

您正试图以其他方式插入视图：

  App.BarView.create（）。appendTo（'＃myFooView'）
  

这是不允许的。您可以使用{{view}}句柄助手来渲染其他类似的视图：

foo模板

 < script type =text / x-handlebarsdata-template-name =index> 
< div id = myFooView> 
 Foo 
 {{view App.BarView}} 
< / div> 
< / script> 
  

但我想你希望这个动态工作。因此，您可以使用 ContainerView ，如错误消息所述：

  App.StickiesView = Ember.ContainerView.extend（{
 click：function（）{
 var stickie = Ember 。$ {
 
 
 
 
 
 
 
 
 } 
}）
  

我在代码中看到点击事件的很多视图， ember鼓励您使用操作，这会提供更多的灵活性，错误/加载处理等。我认为是一个好主意，使用它。

我希望它有助于

I'm new to ember I am trying to append a template to another and it seems to work but it raises an error, can you please explain why?

The error:

Assertion failed: You cannot append to an existing Ember.View. Consider using Ember.ContainerView instead

This is the code in app.js

App.NewStickie = Ember.View.extend({
  click: function(evt){
    var stickie = Ember.View.create({
        templateName: 'stickie',
        content: 'write your notes here'
    });
    stickie.appendTo('#stickies');
  }
});

These are the contents of index.html

<script type="text/x-handlebars">
    {{#view App.NewStickie}}
      <button type="button" class="btn btn-success">
        New
      </button>
    {{/view}}
    {{outlet}}
  </script>

  <script type="text/x-handlebars" id="index">
    <div id="stickies">
      {{#each item in model}}
        <div class="stickie" contenteditable="true">
          {{#view App.DeleteStickie}}
            <span class="glyphicon glyphicon-trash"></span>
          {{/view}}
          <div contenteditable="true">
            {{item.content}}
          </div>
        </div>
      {{/each}}
    </div>
  </script>

  <script type="text/x-handlebars" data-template-name="stickie">
    <div class="stickie">
      {{#view App.DeleteStickie}}
        <span class="glyphicon glyphicon-trash"></span>
      {{/view}}
      <div contenteditable="true">
        {{view.content}}
      </div>
    </div>
  </script>

解决方案

Each view in ember have a template, for example:

foo_view.js

App.FooView = Ember.View.extend({
  templateName: 'foo'
})

foo template

<script type="text/x-handlebars" data-template-name="index">   
  <div id=myFooView>Foo</div>
</script>

You are trying to insert a view inside of other in that way:

App.BarView.create().appendTo('#myFooView')

This isn't allowed. You can use the {{view}} handlebars helper to render a view inside other like that:

foo template

<script type="text/x-handlebars" data-template-name="index">   
  <div id=myFooView>
    Foo
    {{view App.BarView}}
  </div>
</script>

But I think that you want this working dynamically. So you can use the ContainerView, like described by the error message:

App.StickiesView = Ember.ContainerView.extend({
  click: function() {
    var stickie = Ember.View.create({
        templateName: 'stickie',
        content: 'write your notes here'
    });
    this.pushObject(stickie);
  }
})

I see in your code a lot of views with the click event, ember encourage you to use actions, this give more flexibility, error/loading handling etc. I think is a good idea to use it.

I hope it helps

这篇关于emberjs附加工作，但会引发Assertion Failed错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！