ember.js和bootstrap手风琴 - 创建视图的“余烬方式”

Question

我的问题不是如何使自举手风琴工作，而是试图确保我理解“余烬”的做事方式。

我在这里创建了一个bootstrap手风琴的工作示例（截至2013年12月3日）： http ： //jsfiddle.net/nrionfx/s59fA/

DEBUG: ——————————- 
DEBUG: Ember.VERSION : 1.0.0-rc.1
DEBUG: Handlebars.VERSION : 1.0.0-rc.3
DEBUG: jQuery.VERSION : 1.9.1 
DEBUG: ——————————-

为了使手风琴正确折叠，我必须创建一个观察者来观察controller.content数组。 如果我没有这样做，即使我将$（）。折叠放入didInsertElement钩子，插入元素时手风琴也不会崩溃。

App.IndexView = Em.View.extend
    templateName: 'index'
    contentObserver: ( ->
        Ember.run.next this, ->
            @.$('.collapse').collapse()
      ).observes('controller.content')

现在，这有效，但我的问题是：这是在ember框架下执行此操作的适当方式，还是应该在其他地方，例如didInsertElement调用？

----更新----最后的jsFiddle： http ： //jsfiddle.net/nrionfx/s59fA/16/

Answer 1

我建议将您的物品包装在自己的视图中。 在这种情况下，您可以使用didInsertElement挂钩来运行逻辑。

所以你的把手看起来像：

{{#each item in controller}}
   {{view App.ItemView contextBinding="item"}}        
{{/each}}

只需将循环的当前内容移动到此新模板即可。 View会看起来像这样：

App.ItemView = Em.View.extend
    templateName: 'item'
    didInsertElement: ( ->
        Ember.run.next this, ->
            @.$().collapse()
      )

我认为这将是最无耻的方法。 这似乎更好，因为逻辑不会在控制器内容的每次交换时重新运行。 正如您已经说过的，didInsertElement挂钩是与第三方库集成的最合适的位置。

提示：当您将逻辑放在IndexView的didInsertElement挂钩中时，它不起作用，因为此时所包含的集合尚未呈现。

Answer 2

这是在ember框架下执行此操作的适当方法，还是应该在其他位置，例如didInsertElement调用？

确保正确的地方是通过didInsertElement。 正如@mavilein所提到的，您可以通过为每个子元素创建一个视图来完成此操作。

您可能考虑的另一种方法是使用afterRender队列。 例如：

App.IndexView = Em.View.extend
    templateName: 'index'
    contentObserver: ( ->
        Ember.run.next this, ->
            @.$('.collapse').collapse()
      ).observes('controller.content')

查看@machty在ember运行循环上的优秀帖子或在Ember.CollectionView渲染结束时运行jquery