1

DatePickerComponentを作成し、次のように 2 つのコントローラー インスタンスを渡します。

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

コンポーネントの内部からdatePickerControllerを取得できますが、timeSlotControllerを取得しようとすると、常に undefined が返されます。どちらも同じように定義され、同じ方法で渡されます。コントローラーとコンポーネントとルーターの両方がここに貼り付けられます。

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'});                     
      });     
    }); 
  });
4

1 に答える 1

1

コンポーネントのコードにタイプミスがありますdidInsertElementtimeSlot = _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 に答える