在 ajax 刷新时未调用 Ember 组件的 didInsertElement答案

【问题标题】：Ember component's didInsertElement not being called on ajax refresh在 ajax 刷新时未调用 Ember 组件的 didInsertElement
【发布时间】：2014-08-12 17:08:38
【问题描述】：

我有一个 Ember 应用程序，其中有一个索引视图，并且在同一页面（嵌套）上有一个相应的详细信息视图。假设我们正在处理的资源是一个帖子——一个帖子可以有很多评论。在索引页面上有一个帖子列表 - 每一个都是可点击的。当您单击帖子时 - 页面的详细信息部分会加载帖子的详细信息 - 包括评论的语义 UI 手风琴。

我将 Ember.Component 子类化以创建语义手风琴组件并显示带有 Post 的 cmets 的手风琴。在语义手风琴的 'didInsertElement' 方法中 - 我发现有必要执行以下操作才能让手风琴工作......

didInsertElement: ->
  @_super()
  Ember.run.scheduleOnce 'afterRender', this, ->
    @$().accordion()

这很好用——除了，这是问题所在——它只在页面重新加载后才有效。如果我单击不同的帖子 - 为了查看该帖子的详细信息 - 新点击的帖子的 cmets 的手风琴不起作用。我知道为什么它不起作用 - 因为基于 ajax 的“详细信息”重新加载，“didInsertElement”方法没有再次执行。我只是不知道该怎么做才能解决它。希望这里有人知道。

谢谢

【问题讨论】：

标签： jquery ember.js semantic-ui

【解决方案1】：

这是 jQuery 插件的常见问题。我为此找到的最佳解决方案是将该视图包含在 {{#if}} 中，这将在您每次需要时重新绘制。天真的方法是通过 ajax 调用设置 shouldRefresh 属性 - 但这有点 hack-ish。更好的方法是 {{#if}} 在 AJAX 调用中实际更改的内容上，例如 ID。

【讨论】：

【解决方案2】：

制作包装 jQuery 插件的组件可能是一个挑战，但通常我发现有一种方法可以使用成熟的插件 API 来获得你想要的东西。

例如，我正在查看documentation for jQuery UI accordion plugin，我注意到有一个refresh 方法：

处理直接在 DOM 中添加或删除的任何标题和面板，并重新计算折叠面板的高度。

假设您将您的 cmets 传递给手风琴组件为content，我想知道您是否可以这样做：

afterRender: (callback) ->
  Ember.run.scheduleOnce 'afterRender', this, callback

didInsertElement: ->
  @_super()
  @afterRender ->
    @().accordion()

contentDidChange: (->
  return unless @get('element')
  @afterRender ->
    @$().accordion("refresh")
).observes('content')

我不确定refresh 是否真的解决了您所看到的问题，但值得查看您插件的文档，看看是否有某种方法可以在不重新初始化整个插件的情况下解决该问题。

【讨论】：