Question

我正在尝试制作一个Ember View小部件，每隔3秒旋转一次模板。这是我已经得到的，但它似乎没有正常工作。我是采用正确的方法还是有人建议如何做到这一点？

更新：

这几乎可以正常工作，但它不会正确地循环通过模板，因为它过于频繁地更新。这是a jsfiddle。（警告，小提琴最终没有响应，因为它会因为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]

更新＃2

我还尝试了下面@Unspecified建议的ContainerView方法，但我得到'无法调用未定义的方法'childViewsDidChange'。

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

你的templateDidChange方法存在一个问题：因为它observes('templateString')，每次templateString发生变化时都会运行，所以你最终会得到大量的setInterval调用（我认为这就是原因{ {3}}陷入困境。）

your latest fiddle是一个似乎按预期工作的小提琴 - 我只是将setInterval移动到init方法中。

Answer 2

问题
你的方法的问题是你使template计算属性没有依赖关系，因此它只在开头调用时计算一次，它不会重新计算，因为它不依赖于任何东西

有很多方法可以做到这一点（从答案中跳过rotations＆amp; _randomTemplate）

1。的

App.RotatingView = Ember.View.extend

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

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

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

2。的

App.RotatingView = Ember.View.extend

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

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

3。（使用Ember.ContainerView，此方法不需要rerender

App.RotatingView = Ember.ContainerView.extend

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

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

Ember.js中的旋转视图

2 个答案: