在Ember.js中旋转视图

Question

I'm trying to make a little Ember View widget that rotates the template every 3 seconds. This is far as I have gotten, but it doesn't seem to be working correctly. Am I going with the right approach or can anyone suggest how to do this?

UPDATED:

This almost works, but it doesn't cycle through the templates correctly as it is updating far too frequently. Here's a jsfiddle . (WARNING, Fiddle becomes unresponsive eventually because it gets overloaded with updates to the DOM)

App.RotatingView = Ember.View.extend
  templateString: null
  views: ["a", "b", "c"]

  init: ->
    @set 'templateString', @_getNextTemplate()
    @_super()

  template: (->
    Ember.Handlebars.compile(@get 'templateString')
  ).property('templateString')

  templateDidChange: (->
    setInterval =>
      @set 'templateString', @_getNextTemplate()
      Ember.run.next => @rerender()
    , 3000
  ).observes("templateString")

  _getNextTemplate: ->
    views = @get('views')
    length = views.length

    currentTemplateIndex = views.indexOf this.get('templateString')

    if (currentTemplateIndex + 1) == length
      return views[0]
    else
      return views[currentTemplateIndex + 1]

UPDATE #2

I also attempted the ContainerView approach suggested by @Unspecified below, but I get 'Cannot call methods 'childViewsDidChange' of undefined.

App.RotatingView = Ember.ContainerView.extend
  views: Em.A(["a", "b", "c"])

  childViews: (->
    views = @get('views')
    return views.map (view) -> Ember.View.create({template: Ember.Handlebars.compile(view)})
  ).property('views.@each')

  init: ->
    @set 'currentView', @get('childViews.firstObject')
    @_super()

  viewDidChange: (->
    setInterval =>
      @set 'currentView', @_getNextView()
    , 3000
  ).observes('currentView')

  _getNextView: ->
    views = @get('childViews')
    length = views.length

    currentTemplateIndex = views.indexOf this.get('templateString')

    if (currentTemplateIndex + 1) == length
      return views[0]
    else
      return views[currentTemplateIndex + 1]

Answer 1

There's a problem with your templateDidChange method: since it observes('templateString') , it will be run every time that templateString changes, and so you'll end up with an awful lot of setInterval calls (I think that's the reason your latest fiddle bogs down).

Here 'sa fiddle that seems to work as you expect - I simply moved the setInterval into the init method.

Answer 2

The problem with your approach is that you made template computed property with no dependencies, so it gets calculated only once when it was called at the beginning, it wont get recalculated because it is not dependent on any thing

There are a lot of ways to accomplish this(Skipping the rotations & _randomTemplate from the answer)

App.RotatingView = Ember.View.extend

  template: (->
    Ember.Handlebars.compile(@get('templateString'))
  ).property('templateString') 

  setInterval (->
    @set 'templateString', @_randomTemplate()
  , 3000)

  templateDidChange: (->
    @rerender()
  ).observes('template')

App.RotatingView = Ember.View.extend

  template: (->
    string = @_randomTemplate()
    Ember.Handlebars.compile(string)
  ).property()

  setInterval: (->
    @set 'template', Ember.Handlebars.compile(@_randomTemplate)
    @rerender()
  , 3000)

(Using Ember.ContainerView , don't need rerender in this approach)

App.RotatingView = Ember.ContainerView.extend

  currentView: (->
    Ember.View.create({template: Ember.Handlebars.compile(@get('templateString'))})
  ).property('templateString')

  setInterval: (->
    @set 'templateString', @_randomTemplate
  , 3000)