ember.js和引导手风琴 - “ember方式”创建视图 [英] ember.js and bootstrap accordion - the "ember way" of creating the view

问题描述

我的问题不是如何使自动手风琴工作，而是要确保我了解笨的做事方式。

My question is not how to make a bootstrap accordion work, but to try to make sure that I understand the "ember" way of doing things.

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

I've created a working example of a bootstrap accordion here (as of 3/12/2013): 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钩子。

To make the accordion collapse properly, I had to create an observer to watch the controller.content array. If I did not do this, the accordion did not collapse when the elements were inserted, even if I placed the $().collapse into the didInsertElement hook.

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

现在，这有效，但我的问题是：
这是在ember框架，还是应该在别的地方，如didInsertElement调用？

Now, this works, but my question is: Is this the appropriate way of doing this under the ember framework, or should this be somewhere else, such as the didInsertElement call?

----更新----
最终jsFiddle：
http://jsfiddle.net/nrionfx/s59fA/16/

---- Update ---- Final jsFiddle: http://jsfiddle.net/nrionfx/s59fA/16/

推荐答案

我建议将您的项目包装在自己的View中。在这种情况下，您可以使用didInsertElement钩子来运行逻辑。

I would recommend wrapping your items in an own View. In this case, you can use the didInsertElement hook to run your logic.

所以你的把手看起来像：

So your handlebars would look like:

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

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

Just move the current contents of your loop to this new template. The View would look somehow like this:

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

我认为这将是最尴尬的方法。这似乎更好，因为逻辑不是每次都重新运行交换控制器的内容。正如你已经说过，didInsertElement钩子是与第三方库集成最合适的地方。

I think this would be the most emberish approach. This seems better, since the logic is not rerun on every swap of the controller's content. As you already said the didInsertElement hook is the most appropriate place to integrate with 3rd party libraries.

提示：没有工作，当你将逻辑放在您的IndexView的didInsertElement钩子中，因为当时没有呈现包含的集合。

Hint: It did not work, when you placed the logic in the didInsertElement hook of your IndexView, because at that time the contained collection is not rendered yet.

这篇关于ember.js和引导手风琴 - “ember方式”创建视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！