Question

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

我已经将Ember.Component子类化，以便创建一个语义 - 手风琴组件并显示带有Post的评论的手风琴。在semantic-accordion的'didInsertElement'方法中 - 我发现有必要做以下操作以使手风琴工作......

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

这很好用 - 除了，这里有瑕疵 - 它只在页面重新加载后才有效。如果我点击不同的帖子 - 为了查看该帖子的详细信息 - 新点击的帖子的评论的手风琴不起作用。我知道为什么它不起作用 - 因为'didInsertElement'方法由于基于ajax的'detail'重新加载而没有再次执行。我只是不确定如何解决它。希望有人知道。

由于

Answer 1

这是jQuery插件的常见问题。我发现的最佳解决方案是将该视图包含在{{#if}}中，以便在每次需要时重新绘制。天真的方式是通过ajax调用设置一个shouldRefresh属性 - 但这有点黑客攻击。更好的方法是{{#if}}对AJAX调用实际发生变化的事情，比如ID。

Answer 2

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

例如，我正在查看documentation for jQuery UI accordion plugin，我注意到有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是否真正解决了您所看到的问题，但是值得查看插件的文档，看看是否有某种方法可以解决问题。修复问题而不重新初始化整个插件。

在ajax刷新时没有调用Ember组件didInsertElement

2 个答案: