Question

我正在制作一个小应用，可以在视图内外动画不同的iframe。现在我只是想用两个iframe开始简单的数据。

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

我的模板：

<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>

为什么我的IframeView无法访问itemController的isCurrent属性？我也不确定这是否是正确的方法，或者是否有更简单的方法让each使用我的IframeView

这是一个jsbin：http://emberjs.jsbin.com/vagewavu/4/edit

Answer 1

isCurrent生活在控制器上。 controller属性将在视图的范围内，但控制器下的属性不在视图的范围内。您只需要先引用控制器。

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

此外，您的下一步操作没有做任何事情，只是创建一些局部变量，也许您还没有完成它。无论哪种方式，我都将实施结合起来。

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

itemControllers和自定义视图

1 个答案: