CODEWITHSUNDEEP
ember.js
RyanHirsch
RyanHirsch

Reputation: 1847

itemControllers and custom Views

I am working on a small app that animates different iframes in and out of view. Right now I am just trying to start simple with two iframes for my data.

App = Ember.Application.create();
App.IndexRoute = Ember.Route.extend({
  model: function() {
    return [
      {current: true, url:'http://www.flickr.com'},
      {url:'http://bing.com'}
    ];
  }
});

App.IndexController = Ember.ArrayController.extend({
  itemController: 'iframe',
  now: function() {
    return this.filterBy('isCurrent').get('firstObject');
  }.property('@each.isCurrent')
});

App.IframeController = Ember.ObjectController.extend({
  isCurrent: Ember.computed.alias('current')
});

App.IframeView = Ember.View.extend({
  classNameBindings: [':slide', 'isCurrent'],
  templateName: 'iframe'
});

And my templates:

<script type="text/x-handlebars" data-template-name="index">
<button {{action "next"}}>Next</button>
  {{#each}}
    {{view "iframe"}}
  {{/each}}
</script>
<script type="text/x-handlebars" data-template-name="iframe">
  <iframe {{bind-attr src=url}}></iframe>
</script>

Why can't my IframeView access my isCurrent property of my itemController? I am also unsure if this is the right way to do this, or if there is an easier way to have my each use my IframeView

Here is a jsbin: http://emberjs.jsbin.com/vagewavu/4/edit

Upvotes: 0

Views: 48

Answers (1)

Kingpin2k
Kingpin2k

Reputation: 47367

isCurrent lives on the controller. The controller property will be in scope in the view, but the properties under the controller aren't in scope of the view. You just need to reference controller first.

App.IframeView = Ember.View.extend({
  classNameBindings: [':slide', 'controller.isCurrent'],
  templateName: 'iframe'
});

Additionally your next action isn't doing anything, just creating some local variables, maybe you weren't finished implementing it. Either way I tossed together an implementation.

next: function() {
  var now = this.get('now'),
      nowIdx = this.indexOf(now),
      nextIdx = (nowIdx + 1) % this.get('length'),
      next = this.objectAt(nextIdx);
  now.toggleProperty('current');
  next.toggleProperty('current');
}

http://emberjs.jsbin.com/vagewavu/10/edit

Upvotes: 1

Related Questions