1

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

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

从组件内部我可以获取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>

但是我向组件alert(timeSlot)和 alert(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'});                     
      });     
    }); 
  });
4

1 回答 1

1

您在组件的代码中有拼写错误didInsertElement应该timeSlot = _this.get('timeSlotController');使用大写的 S

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/

于 2013-10-18T09:00:25.310 回答