4

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

我在这里创建了一个引导手风琴的工作示例（截至 2013 年 3 月 12 日）：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 数组。如果我不这样做，则在插入元素时手风琴不会折叠，即使我将 $().collapse 放入 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/

4

2 回答 2

2

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

所以你的车把看起来像：

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

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

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

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

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

于 2013-03-12T13:43:49.970 回答
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

于 2013-03-12T16:57:09.993 回答