Компонент Emberjs-1.0 и вычислительное свойство в контроллере

Я передаю контроллер в компонент emberjs. Контроллер имеет вычисляемое свойство с именем dateArray, которое содержит массив дат. Нажав на #linkTo, указывающую на шаблон встречи, я могу перейти в консоль и выполнить:

    b = App.__container__.lookup("controller:appointment")
    c = b.get('dateArray')
    and it returns [Array[2]]

Однако, когда я передаю этот контроллер в компонент emberjs с

      {{date-picker datePickerController=controller}}

Внутри компонента я могу получить правильный экземпляр контроллера , используя приведенный ниже код.

 datePicker = _this.get('datePickerController');
 console.log(datePicker), shows the dateArray with its content.

но массив отображается как пустой, когда я исправляю его на основе приведенного выше экземпляра, используя приведенный ниже код.

  controllerContent = datePicker.get('dateArray');

Однако, если я добавлю dateArray в выражения handlebars в шаблоне встреч, он отобразит его содержимое:

  {{dateArray}}

Так почему же его dateArray пустой внутри компонента emberjs, когда экземпляр контроллера компонент emberjs имеет dateArray

Контроллер:

App.AppointmentController = Ember.ObjectController.extend({
   needs: [ 'timeSlot'],
   timeSlotController: Ember.computed.alias('controllers.timeSlot'),
   dateArray: function(){
     _this = this;  

     fetchDates = [ ];

    var aa = _this.get('content'); 

    var yy = aa.get('timeSlots')

    yy.then(function(hh){
        nn = hh.map(function(item){ return moment.utc(item.get('startTime')).format("YYYY-MM-DD"); });

     pp =  fetchDates.pushObjects([nn]);

     return nn;
    });  

    return fetchDates;
  }.property('[email protected]')


});

Компонент emberjs:

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

   didInsertElement: function() {
     this._super();
     _this = this;
     var datePicker;

     datePicker = _this.get('datePickerController');
    //console.log(datePicker);

     var controllerContent = datePicker.get('dateArray');    

    //returns nil
     alert(controllerContent); 

    });// closes didInsertElement

  }

 });

javascript ember.js ember-router
person brg    schedule 20.10.2013    source источник
comment
Если вы добавите точку останова в вычисляемое свойство dateArray, сработает ли она при повторном вызове get в этой строке: var controllerContent = datePicker.get('dateArray');   -  person Kingpin2k    schedule 20.10.2013

Ответы (2)


arrow_upward
3
arrow_downward

Ваша проблема в том, что ваше свойство dateArray является асинхронным, потому что вы используете yy.then.

Вот что происходит:

Вы вызываете datePicker.get('dateArray') этот триггер yy.then, но он не разрешается сразу, вы возвращаете fetchDates как пустой массив. Когда yy.then загрузится, он заполнит массив fetchDates.pushObjects([nn]), так что это обновит шаблон.

Я рекомендую вам наблюдать за изменениями в массиве, чтобы выполнить то, что вы хотите:

App.DatePickerComponent = Ember.Component.extend({
  datePickerController: null,
  dateArrayChanged: function() {
    var dateArray = this.get('datePickerController.dateArray');
    // now date array have elements
  }.observes('datePickerController.dateArray.[]')
 });
person Marcio Junior    schedule 20.10.2013
comment
Спасибо @Márcio за полезное объяснение. Вы правы, потому что теперь я могу получить массив изнутри dateArrayChanged. Есть ли у вас какие-либо предложения о том, почему функция dat, которая обновляется изнутри dateArrayChanged для хранения дат, возвращает undefined. Оба они определены внутри DatePickerComponent в этом jsfiddle. - person brg; 21.10.2013
comment
В функции dat используйте b = this.get('datePickerController.dateArray'); Не забывайте использовать get и set для чтения/обновления свойств объектов ember. - person Edu; 21.10.2013
comment
@Edu, спасибо за это предложение. У меня все еще есть одна проблема: вызов функции dat в didInsertElement с чем-то вроде alert(this.dat()); все еще возвращает значение undefined , хотя внутри функции или метода dat у меня есть alert(this.get('datePickerController.dateArray')), который возвращает правильное значение. Вот обновленный jsfiddle. В компоненте datePicker функция dat определяется после didInsertElement. Благодарю. - person brg; 21.10.2013

arrow_upward
1
arrow_downward

В Ember контроллер - странная вещь, это просто декоратор поверх модели, если ваша модель изменится под вашим контроллером, ваш контроллер может быть совершенно другим (возможно, это ваше намерение). Вы можете попробовать передать dateArray в компонент.

person Kingpin2k    schedule 20.10.2013
comment
это работает путем отображения в шаблоне компонента, однако я использую этот a.forEach(function(item) { return item;});, чтобы попытаться перебрать его в самом компоненте, и это еще не определено. Какие-либо предложения - person brg; 20.10.2013