1

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

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

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

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

谢谢

4

2 回答 2

0

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

例如，我正在查看jQuery UI 手风琴插件的文档，我注意到有一个refresh方法：

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

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

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

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

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

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

于 2014-10-16T00:47:08.063 回答
0

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

于 2014-10-15T21:27:47.853 回答