Ember.js 如何使组件绝对独特?

Ember.js 如何使组件绝对独特?,ember.js,ember-cli,Ember.js,Ember Cli,所以现在这让我很生气。根据Ember文档,组件是可重用的,但显然它不是唯一的 所以我花了两天时间制作了一个定制的日期选择器组件。该组件由三个文本输入(日、月和年)和一些在焦点弹出窗口中显示的附加功能组成。但是当我在一个屏幕上有两个日期选择器时,当我只选择其中一个时,两个日期选择器的弹出窗口都会出现 现在,其中一个弹出窗口包含一个月中所有日期的按钮,从0到31。它们是用{{{#each}}助手添加到模板中的。有道理吧?好吧,如果我有两个日期选择器,这些按钮会两次添加到这两个组件中,分别显示0-31

所以现在这让我很生气。根据Ember文档,组件是可重用的,但显然它不是唯一的

所以我花了两天时间制作了一个定制的日期选择器组件。该组件由三个文本输入(日、月和年)和一些在焦点弹出窗口中显示的附加功能组成。但是当我在一个屏幕上有两个日期选择器时,当我只选择其中一个时,两个日期选择器的弹出窗口都会出现

现在,其中一个弹出窗口包含一个月中所有日期的按钮,从0到31。它们是用{{{#each}}助手添加到模板中的。有道理吧?好吧,如果我有两个日期选择器,这些按钮会两次添加到这两个组件中,分别显示0-31和另一个0-31

所以,首先,我想警告大家组件不是唯一的它是一个具有所有实例共享的属性和方法的单例。这一点在余烬文件中根本没有明确说明。(反正这很糟糕,因为缺少很多信息)


第二,我想知道是否有人能快速解决这个问题。组件是应该使用的,还是应该切换到其他组件?

您看到的问题是因为您在
FooBarComponent
类/原型上设置了
foo
属性,该属性在所有实例之间共享

要实现所需功能,需要在每个
FooBarComponent
实例上设置
foo
属性。一种方法是在
init
hook中设置
foo
属性,如下所示

App.FooBarComponent = Ember.Component.extend({
  init: function(){
    this._super();
    this.set('foo', Ember.A(["bar"]));
  },

  actions: {
    onClick: function() {
      this.get('foo').pushObject("whatever");
    }
  }
});

你可以在这里看到一个工作箱:

你能举例说明你看到的问题吗。每个余烬组件实例都应该是唯一的,而不是共享状态。如果你贴一个垃圾箱,我可以试着帮你。我以为这是一只虫子。这里有更多的信息