Uncaught TypeError: Cannot read property 'child' of undefined

[adamwong246]

Hey guys, I could use some help.

the error

Uncaught TypeError: Cannot read property 'child' of undefined

the code

   +famousContext id="mainCtx"    
    +Scrollview
     +famousEach groupedEvents
      +Surface size='[undefined,25]' class="track"
       +famousEach occurences
        +Surface size='[50,25]'
         .occurence($dyn=occurrenceAttributes)
          a(href="/instance/#{_id}")= instanceDisplayName

I'm trying to bind each groupedEvent to a surface and each occurrence within that groupedEvent to it's own, surface-within-a-surface. So I suppose, I'm trying to achieve nested surfaces?

The groupEvents is an array of hashes, each with it's own array of hashes and it looks something like...

[
 {
  id: 'abc123',
  displayName: 'foo',
  occurrences: [
   {
    instanceDisplayName: 'bar',
   },
   ... 
  ]
 },
 ...
]
]

which is NOT a cursor but a object literal, processed from documents from multiple collections. I'm not sure if that makes a difference.

[gadicc]

Hey Adam

You can't nest a Surface inside another Surface, they are leaf nodes of the render tree and you can only put DOM stuff in them. We usually warn about this but we never anticipated the famousEach in the middle

I'm not 100% sure what you want the final display to look like. Can you try explain exactly what you're after? I think maybe you just want to replace that first Surface with a SequentialLayout. That will stack all the nested views one after the other.

[adamwong246]

Thanks for the response. Since yesterday, I've come to the same understanding- you can't nest Surfaces.

updated code

 +Scrollview size="[undefined, undefined]" direction="Y" paginated="true"
  +famousEach groupedEvents
   +FlexibleLayout ratios='[1, 3]' direction='0'
    +Surface size='[undefined, undefined]' class=realtiveTimeColorClass
     h4= displayName
     span(class="text-#{realtiveTimeColorClass}")= relativeTime
    +Surface size='[undefined, undefined]'
     each occurences
      +Surface size=occurenceSize translate=occurenceAlign class="pane"
       h6= _id

Perhaps you could explain why Flexible Layout isn't supported?
Sorry for the dumb questions, but I'm learning meteor, d3 and fam.ous all at once

And to answer your question, I'm trying to make a gantt chart. I'll try to make a wireframe to illustrate the problem

[adamwong246]

here's that wireframe
https://drive.google.com/file/d/0B-0Tw0sw72PeXzhpMVBTeUhyNnM/view

[timfam]

famous v0.5 is out, I do say either hold off until some components are made on this new api or go over to http://famous.org/learn/ to get some of the basics. This gives @gadicc time to get a new version of famous-views up and ready