0

我正在尝试制作一个每 3 秒旋转一次模板的 Ember View 小部件。这是我所得到的，但它似乎不能正常工作。我是否采用正确的方法，或者任何人都可以建议如何做到这一点？

更新：

这几乎可以正常工作，但是由于更新太频繁，因此无法正确循环浏览模板。这是一个 jsfiddle。（警告，Fiddle 最终会变得无响应，因为它因 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

我还尝试了ContainerView下面@Unspecified 建议的方法，但我得到未定义的“无法调用方法'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]
4

2 回答 2

2

您的 templateDidChange 方法存在问题：因为它observes('templateString')，它将在每次 templateString 更改时运行，因此您最终会收到大量的 setInterval 调用（我认为这就是您最新的小提琴陷入困境的原因）。

这是一个看起来像你期望的那样工作的小提琴——我只是将 setInterval 移到了init方法中。

于 2013-05-28T07:13:17.803 回答
1

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

有很多方法可以做到这一点（从答案中跳过rotations& ）_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)
于 2013-05-27T14:56:30.853 回答