Question

我正在将控制器传递给 emberjs component 。控制器有一个名为 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 ，则会呈现其内容：

  {{dateArray}}

当 emberjs组件的控制器实例具有 dateArray 时，为什么 dateArray 在 emberjs组件内为空p>

控制器：

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('content.@each.timeSlots')


});

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

  }

 });

Answer 1

您的问题是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.[]')
 });

Answer 2

在Ember中，控制器是一个奇怪的东西传递，它只是一个模型的装饰者，如果你的模型在你的控制器下面改变你的控制器可能是完全不同的（也许这是你的意图）。您可以尝试将dateArray传入组件。

控制器中的Emberjs-1.0组件和计算属性

2 个答案: