Question

所以现在这让我感到沮丧。根据Ember文档，一个组件是可重用的，但显然它不是唯一的！

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

现在，其中一个弹出窗口包含一个月中所有日期的按钮，0到31.这些按钮在模板中添加了{{#each}}帮助器。有道理吗？好吧，如果我有两个日期选择器，这些按钮会被添加两次到两个组件，显示0-31和另一个0-31。

所以，首先，我要警告所有人。 组件不是唯一的！它是一个包含所有实例共享的属性和方法的单例。这在Ember文件中根本没有说清楚。（因为很多信息都缺失了，所以很糟糕）

其次，我想知道是否有人快速解决此问题。组件是一种可行的方式，还是应该转换为其他组件？

Answer 1

您看到的问题是因为您在foo Class / Prototype上设置FooBarComponent属性，该属性在所有实例之间共享。

要实现您的目标，您需要在每个foo实例上设置FooBarComponent属性。一种方法是在foo挂钩中设置init属性，如下所示。

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

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

您可以在此处查看工作箱：http://jsbin.com/leyut/1/edit

如何使组件绝对独特？

1 个答案: