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')

在ember run loop或Run jquery at the end of Ember.CollectionView rendering上查看@ machty的优秀帖子 {{3}}

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

2 个答案: