Computed property based on array values is not recomputed

4
votes

Problem Space

I'm rendering some nested Ember views so I can make a splitter-pane style UI. I want to resize my views when they first render so that they'll have equal widths. I don't want my child views looking at each other, so I'm using a subclass of Ember.ContainerView to hold my content and draggable splitter handles.

I can't use Ember.View#didInsertElement on my container view, because I need to wait for my child views to be fully rendered.

My (attempted) Solution

I'm using the code presented in this answer: How to wait for a template to be fully rendered. This adds a property isRendered to all Ember.View instances that is set automatically when a template fires didInsertElement by re-opening Ember.View:

Ember.View.reopen

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

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

I tried re-opening Ember.ContainerView to add a childViewsRendered property to all container views, but Ember objected and threw some very strange IndexOutOfBounds errors for container views with only one item in childViews.

I ended up putting my collection code in the following 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('[email protected]')

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

And then I have a class like this: 

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

What works:

  • App.SplitterView#childViewsRendered is computed once, before any views have rendered, and thus becomes false
  • Views are processed (inserted and rendered) by Ember, and set their own isRendered property fine and dandy.
  • Later running window.wtf.get('childViews').everyProperty('isRendered') returns true.

What doesn't work:

  • the computed property childViewsRendered never updates itself again.
  • Computed properties on dummy values on childView array element members also don't seem to work.
1
javascriptcoffeescriptember.js

1 Answers

0
votes

Without a jsFiddle to see I can only go by what you've said and the snippets you've provided but it seems like all you're trying to do is make sure all the childViews of a container are in the DOM before doing something, yes?

If that's the case... when views are added to childViews they are, as you know, automatically rendered and inserted into the DOM. Well this all happens within the same RunLoop. So to delay the execution of some function until all children are "inDOM" it's as easy as observing childViews.@each and using Ember.run.next to delay the execution until the next RunLoop. Here is an example

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")

If you were to have {{view App.SomeContainerView}} in a template, in the console you'd see:

afterRender false
doWhatever
childrenAreInDom true

If you were to then programmatically add cView & dView via pushObjects after the container is already in the DOM, you'd see

observeChildren false
doWhatever
childrenAreInDom true

Even if this isn't exactly what you want hopefully it helps you get where you need to be without all that Mixin nonsense :D