在Ember.js中旋转视图

我正在尝试制作一个小的余烬视图小部件，它每3秒钟旋转一次模板。这是我所能做到的，但它似乎工作不正常。我是否采取了正确的方法，或者有人能建议如何做到这一点吗

更新：

这几乎是可行的，但它不能正确地循环使用模板，因为它的更新过于频繁。给你。（警告，Fiddle最终会失去响应，因为它会因DOM更新而过载）

App.RotatingView=Ember.View.extend
templateString:null
视图：[“a”、“b”、“c”]
初始化：->
@设置“templateString”，@_getNextTemplate（）
@_超级（）
模板：（->
Ember.handlebar.compile（@get'templateString'）
).property（'templateString'）
templateDidChange:（->
setInterval=>
@设置“templateString”，@_getNextTemplate（）
Ember.run.next=>@rerender（）
, 3000
).observes（“模板字符串”）
_getNextTemplate:->
视图=@get（'views'））
长度=视图。长度
currentTemplateIndex=views.indexOf this.get（'templateString'））
如果（currentTemplateIndex+1）=长度
返回视图[0]
其他的
返回视图[currentTemplateIndex+1]

更新#2

我还尝试了下面@Unspecified建议的

ContainerView

方法，但是我得到了undefined的'cannotcallmethods'childViewsDidChange'

App.RotatingView=Ember.ContainerView.extend
视图：Em.A（[“A”、“b”、“c”]）
儿童视图：（->
视图=@get（'views'））
return views.map（view）->Ember.view.create（{template:Ember.handlebar.compile（view）}）
).property（'视图。@each'）
初始化：->
@设置'currentView'，@get（'childViews.firstObject'）
@_超级（）
viewDidChange:（->
setInterval=>
@设置“currentView”，@_getNextView（）
, 3000
).observes（'currentView'）
_getNextView:->
视图=@get（'childview'））
长度=视图。长度
currentTemplateIndex=views.indexOf this.get（'templateString'））
如果（currentTemplateIndex+1）=长度
返回视图[0]
其他的
返回视图[currentTemplateIndex+1]

问题
您的方法的问题是，您创建的

template

computed属性没有依赖项，因此在开始调用时只计算一次，不会重新计算，因为它不依赖于任何东西

有很多方法可以实现这一点（从答案中跳过

旋转

&

\u随机模板

）

一,

二,

三,。（使用

Ember.ContainerView

，在这种方法中不需要

重新加载

）

问题
您的方法的问题是，您创建的

template

computed属性没有依赖项，因此在开始调用时只计算一次，不会重新计算，因为它不依赖于任何东西

有很多方法可以实现这一点（从答案中跳过

旋转

&

\u随机模板

）

一,

二,

三,。（使用

Ember.ContainerView

，在这种方法中不需要

重新加载

）

---

templateDidChange方法有一个问题：因为它观察（'templateString'），所以每次templateString更改时都会运行它，因此最终会有大量的setInterval调用（我认为这就是陷入困境的原因）

---

“这是一个像您期望的那样工作的小把戏-我只是将setInterval移到了

init

方法中。

您的templateDidChange方法有一个问题：因为它

观察（'templateString'）

，所以每次templateString更改时都会运行它，因此您将得到大量的setInterval调用。”（我认为这就是陷入困境的原因）

---

这是一把小提琴，似乎能像你期望的那样工作-我只是简单地将setInterval移到

init

方法中。

我期望我的

模板

属性中的

重新渲染器

会递归地调用自己。你的任何解决方案都不能完全工作，因为你的

setInterval

。这应该是r观察者？什么是观察者？setInterval是一种javascript方法，每n毫秒执行一个给定的函数。这个上下文肯定有一些问题，我知道什么是

setInterval

，但在您的示例中没有被调用。我尝试了这个方法，但也没有触发。您是否可以创建一个摆弄你的答案？好吧，Sheldonnbaker在我用答案更新摆弄之前就回答了，因此解决方案是你可以使用我答案中定义的三种方法中的任何一种，但诀窍是将setInterval放在init函数中，而不是将它定义为我所做的属性。我希望

重新渲染器

在我的

模板中

属性会递归地调用自身。由于你的

设置间隔

，你的解决方案没有一个完全有效。这应该是属性还是观察者？观察的是什么？设置间隔是一个javascript方法，每n毫秒执行一个给定的函数。设置间隔肯定有一些问题是上下文，我知道什么是

setInterval

，但在您的示例中没有调用它。我尝试了这个，但它也没有启动。您可以修改您的解决方案吗？Sheldonbbaker在我可以用答案更新fiddle之前回答了它，因此解决方案是您可以使用三个m中的任何一个在我的回答中定义了方法，但诀窍是将setInterval放在init函数中，而不是像我一样将其定义为一个属性，如果您想沿着ContainerView路线走（至少可能更优雅），请查看“将视图绑定到显示”在一个以容器视图为奖励的示例中？我现在将研究一个-thoug，Unspecified的第三个示例应该可以很好地工作

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)

App.RotatingView = Ember.ContainerView.extend

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

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