Question

我创建了一个 DatePickerComponent ，我传递了两个控制器实例，如下所示：

<script type="text/x-handlebars" data-template-name="appointment">
  {{date-picker datePickerController=datePickerController  timeSlotController=timeSlotController}}

从 component 里面我可以获取 datePickerController 但是当我尝试获取 timeSlotController 时，它总会返回未定义。它们都是相同的，并以同样的方式传递，所以为什么一个未定义而另一个可用。控制器和组件以及路由器都粘贴在这里。

App.DatePickerComponent = Ember.Component.extend({
  datePickerController: null,
  timeSlotController: null,

  didInsertElement: function() {
   this._super();
   _this = this;
   var datePicker, timeSlot;
   timeslot = _this.get('timeSlotController');
   datePicker = _this.get('datePickerController');

   alert(timeSlot);
   alert(datePicker);
  }
});

我将 DatePickerComponent 添加到下面的约会模板。

  <script type="text/x-handlebars" data-template-name="appointment">
   {{date-picker datePickerController=datePickerController  timeSlotController=timeSlotController}}

  <p class="first">   from appointment template</p> 
   {{datePickerController}}
   <br/>
  <p class="second"> from appointment template</p>
   {{timeSlotController}}
 <br/>
</script>

奇怪的是，当约会模板根据上面的内容呈现时，它会显示传递了 timeSlotController 实例，因此它看到：

 <App.TimeSlotController:ember319>

和

<App.DatePickerController:ember313>

但我在组件提醒（timeSlot）和提醒（datePicker）

中添加了2个提醒

   alert(timeSlot);   gives undefined
  alert(datePicker);  returns **<App.DatePickerController:ember313> **

所以** alert（datePicker）**返回模板中显示的同名实例。

约会控制员

App.AppointmentController = Ember.ObjectController.extend({
  needs: ['datePicker', 'timeSlot'],
  datePickerController:   Ember.computed.alias('controllers.datePicker'),
  timeSlotController: Ember.computed.alias('controllers.timeSlot')

});

时间段控制器

 App.TimeSlotController = Ember.ArrayController.extend({
   content: [ ],
   //content: Ember.computed.alias('day'),
   contentBinding: 'day',
   day: ''   
 });

日期选择器控制器

 App.DatePickerController =  Ember.ArrayController.extend({ 
   needs: ['appointments', 'appointment'],
   //apptId: '', 
  appointments: Ember.computed.alias('controllers.appointments.content'),
  apptId:  Ember.computed.alias('controllers.appointment.content')
 });

路由器

  App.Router.map(function(){
    this.resource('appointments', {path: "/"}, function(){ 
      this.resource('appointment', {path: "/:appointment_id"}, function(){
         this.resource('timeSlot', {path: '/:day'});                     
      });     
    }); 
  });

Answer 1

组件代码中有一个拼写错误 didInsertElement 应为timeSlot = _this.get('timeSlotController');且大写字母

didInsertElement: function() {
  this._super();
  _this = this;
  var datePicker, timeSlot;
  //timeslot = _this.get('timeSlotController');
  timeSlot = _this.get('timeSlotController');
  datePicker = _this.get('datePickerController');

  alert(timeSlot);
  alert(datePicker);
}

http://jsfiddle.net/FUdgY/1/

Emberjs-1.0将控制器实例传递给ember组件

1 个答案: