How to slowly pass ember component a repeating list of data

Question

Hey so im trying to pass a component different data in a rotation, so say I have a few objects in my controller class

a: {
   name: "a",
   number: 6
}
b: {
   name: "b",
   number: 15
}

And I want to pass them to a component in the template file:

{{my-component data=a}}

But I want to pass my-component the data in a loop of the data 'a' being displayed for 4 seconds, then the data of 'b' being displayed for 4 seconds, then just continuously repeating this until the page has been changed. A few thoughts on how I can do this, and which I have tried, but hasn't worked.

Using Ember.run.later and attempting to call the function (I get the error that 'self.function()' is not a function (Note this is in the actions section of the controller, it starts rotating when you click a button.):

 function: function(){
   var self = this;
   return self.get('test');
   Ember.run.later((function() {
     if(self.get('test'))
        self.set('test', false);
     else
        self.set('test', true);
     self.function();  // <-- Error is here
   }), 4000);
 }

And then using an if statement in the template:

   {{#if test}}
      {{my-component data=a}}
   {{else}}
      {{my-component data=b}}
   {{/if}}

So it runs this for the first time, but it never actually keeps rotating through these two data items. Help greatly appreciated.

How about just pass in an array directly in the component and let the component cycle through the array. http://emberjs.jsbin.com/vilode/2/edit?html,js,output — blessanm86, Feb 17 '16 at 04:02

ashfaq.p · Accepted Answer · 2016-02-17T06:57:02.393

You can just change the data you are passing to the component.

{{my-component data=selectedObject}}

In your controller:

selectedObject: {},
count: 0,
allObjects: [
  {
      name: "a",
      number: 6
  },
  {
      name: "b",
      number: 6
  }
],
rotateObject: function() {
    this.set('selectedObject', this.get('allObjects')[count]);
    this.set('count', this.get('count')+1);
    Ember.run.later(function(){
        this.rotateObject();
    },4000);
}

This way, every 4 seconds the selectedObject will change and the component will be updated with the new data. I changed the objects to be in an array.I'm sure you can figure out a way for that.

How to slowly pass ember component a repeating list of data

1 Answers1