4

问题空间

我正在渲染一些嵌套的 Ember 视图，这样我就可以制作一个拆分窗格样式的 UI。我想在第一次渲染时调整我的视图大小，以便它们具有相等的宽度。我不希望我的子视图互相看着，所以我使用一个子类Ember.ContainerView来保存我的内容和可拖动的拆分器句柄。

我不能Ember.View#didInsertElement在我的容器视图上使用，因为我需要等待我的子视图完全呈现。

我的（尝试的）解决方案

我正在使用此答案中提供的代码：如何等待模板完全呈现。这会isRendered为所有实例添加一个属性，该属性会在模板通过重新打开 Ember.ViewEmber.View触发时自动设置：didInsertElement

Ember.View.reopen

  didInsertElement: ->
    res = @_super();
    @_setIsRendered();
    res

  _setIsRendered: ->
    if (!! @$())
      @set('isRendered', true)
    else
      Ember.run.next this, ->
        @_setIsRendered()

我尝试重新打开Ember.ContainerView以向所有容器视图添加一个childViewsRendered属性，但 Ember 反对并为子视图中只有一个项目的容器视图抛出了一些非常奇怪的 IndexOutOfBounds 错误。

我最终将我的收藏代码放在以下 mixin 中：

App.ChildrenRendered = Ember.Mixin.create

  childViewsRendered: (->
    res = @get('childViews').everyProperty('isRendered')
    console.log('childViewsRendered', res, this)

    # Pointer to this most offensive object for debugging
    window.wtf = this
    res
  ).property('childViews.@each.isRendered')

  _runChildViewsDidRender: (->
    if @get('childViewsRendered')
      console.log('trying to invoke childViewsDidRender')
      Ember.tryInvoke(this, 'childViewsDidRender')
  ).observes('childViewsRendered')

然后我有这样的课：

App.SplitterView = Ember.ContainerView.extend App.ChildrenRendered,
  # ...(some properties)...
  init: ->
    child_views = @get('childViews')
    child_views.pushObjects([App.WindowView.create(), App.WindowView.create()])

什么有效：

  • App.SplitterView#childViewsRendered在任何视图渲染之前计算一次，因此变为false
  • 视图由 Ember 处理（插入和渲染），并设置它们自己的isRendered属性。
  • 稍后运行window.wtf.get('childViews').everyProperty('isRendered')返回true。

什么不起作用：

  • 计算的属性childViewsRendered永远不会再自我更新。
  • 数组元素成员上的虚拟值的计算属性childView似乎也不起作用。
4

1 回答 1

0

如果没有 jsFiddle 看，我只能按照您所说的和您提供的片段进行，但似乎您要做的只是确保容器的所有 childViews 在做某事之前都在 DOM 中，是的？

如果是这样的话......当视图被添加到childViews它们时，如您所知，它们会自动呈现并插入到 DOM 中。好吧，这一切都发生在同一个 RunLoop 中。因此，要延迟某个函数的执行，直到所有子节点都“inDOM”，它就像观察childViews.@each和使用Ember.run.next延迟执行到下一个 RunLoop 一样简单。这是一个例子

App.SomeContainerView = Em.ContainerView.extend
  init: ->
    @_super() # run default init
    # add 2 of our 4 views
    @get('childViews').pushObjects [@aView.create(), @bView.create()]

  # a non-cached (volatile) computed property to check if children are inDOM
  # just used for demo purposes
  childrenAreInDom: (->
    @get('childViews').every (v) ->
      v.state is "inDOM"
  ).property().volatile()

  # our observer
  observeChildren: (->
    # if the container isn't inDOM yet the afterRender function we add below 
    # will handle it, if views are added/removed after that then we handle it here
    return unless @state is "inDOM"
    # output to console if every childview are inDOM
    console.log "observeChildren", @get('childrenAreInDom')
    # the above will always be false since we're still in the same RunLoop
    # next RunLoop our function will run
    Ember.run.next @, 'doWhatever'
  ).observes('childViews.@each') # observe changes in the childViews array

  afterRender: ->
    console.log "afterRender", @get('childrenAreInDom')
    Ember.run.next @, 'doWhatever'

  # the function we want to run eventually after children are inDOM
  doWhatever: ->
    console.log "doWhatever"
    # print out childrenAreInDom one more time.. it will be true
    console.log "childrenAreInDom:", @get('childrenAreInDom')

  # some views to insert
  aView: Em.View.extend
    template: Em.Handlebars.compile("A")
  bView: Em.View.extend
    template: Em.Handlebars.compile("B")
  cView: Em.View.extend
    template: Em.Handlebars.compile("C")
  dView: Em.View.extend
    template: Em.Handlebars.compile("D")

如果您在模板中有 {{view App.SomeContainerView}}，在控制台中您会看到：

afterRender false
doWhatever
childrenAreInDom true

如果您要在容器已经在 DOM 中之后通过 pushObjects 以编程方式添加 cView 和 dView，您会看到

observeChildren false
doWhatever
childrenAreInDom true

即使这不是您想要的，希望它可以帮助您到达您需要的地方，而无需所有 Mixin 废话：D

于 2012-12-05T08:49:47.157 回答