尝试使用famo.us和用户生成的内容制作动态可滚动树

Question

我对Famou.us很新，所以如果这是一个愚蠢的问题，请保持温和：

我正在努力选择正确的Famous构造来在app中创建可滚动的“页面”，该app实际上是由包含用户生成的内容的多个子节点组成的树。由于内容是用户生成的，因此存在未知数量的子节点。每个节点所需的空间量在设计时由用户生成而知道。

我可以看到它如何适用于内容大小统一的列表/树...所以这里的动态要求令我感到困惑。

我尝试使用：

1）GridLayout，但这不起作用，因为网格中的每个单元格/行都是统一的。所以如果每个单元格都有更多或更少的内容，它似乎不起作用。例如，如果网格尺寸为[1,5]并且第3个单元格的内容比其他单元格（或可用空间）更多，则似乎不可能使该单元格的大小动态变化（就像使用或在HTML）。

我尝试在每个网格单元格中包含一个SequentialLayout，这在一定程度上起作用，但是大小调整和滚动似乎不起作用。

2）嵌套的“SequentialLayout”。例如，具有X方向的父SequentialLayouts描绘了列，然后在每个父X面向嵌套其他Y方向的SequentialLayouts

无论如何，我尝试了一堆其他的着名视图和变体，但似乎无法获得一个表现得像或在HTML中容易滚动的。

我希望这种类型的页面有一个简单的模式/最佳实践。

也许有一个例子可以让我明白这一点，拜托？

顺便说一下，我正在使用Meteor + Famous。我确实看到了纸张示例https://github.com/jperl/paper，但这似乎更像是一种向下钻取的方法，而不是在页面上显示所有内容。它也有点复杂......我只需要一些婴儿步骤。

这是我使用着名的https://famous-views.meteor.com实现的许多简单测试之一：

（道歉，如果这不是纯粹的着名JS，但希望你能得到主旨）

```

{{#Scrollview size="[undefined,undefined]"}}

    {{#GridLayout dimensions="[1,2]" size="[undefined,undefined]"}}
        {{#Surface size="[undefined,undefined]" class="well"}}This is some content{{/Surface}}
        {{#GridLayout dimensions="[4,1]" size="[undefined,undefined]"}}
            {{#Surface size="[undefined,undefined]" class="well"}}
            <p>Col 1- Nam libero nisi, scelerisque vitae velit nec, tincidunt rhoncus diam. Duis eleifend diam neque, ut sagittis mi maximus a. Aliquam suscipit vel purus gravida porta. Praesent dignissim iaculis posuere. Nunc ultrices, purus eget sagittis hendrerit, leo arcu pretium neque, eget bibendum quam odio a massa. Vivamus laoreet arcu vel orci lobortis sodales. Praesent non tristique lacus, eget pretium mauris. Suspendisse tempor, nisl eu volutpat blandit, eros nibh tristique felis, sit amet dictum nibh mi eu turpis.</p>
            {{/Surface}}
            {{#GridLayout dimensions="[2,1]" size="[undefined,undefined]"}}
                {{#Surface size="[150,100]" class="red-bg"}}
                <h1>#a.1</h1>
                <p>Nam libero nisi, scelerisque vitae velit nec, tincidunt rhoncus diam. Duis eleifend diam neque, ut sagittis mi maximus a. Aliquam suscipit vel purus gravida porta. Praesent dignissim iaculis posuere. Nunc ultrices, purus eget sagittis hendrerit, leo arcu pretium neque, eget bibendum quam odio a massa. Vivamus laoreet arcu vel orci lobortis sodales. Praesent non tristique lacus, eget pretium mauris. Suspendisse tempor, nisl eu volutpat blandit, eros nibh tristique felis, sit amet dictum nibh mi eu turpis.</p>
                {{/Surface}}
                {{#Surface size="[150,100]" class="green-bg"}}<h1>#b.1</h1>{{/Surface}}
                {{#Surface size="[150,100]" class="blue-bg"}}<h1>#c.1</h1>{{/Surface}}
                {{/GridLayout}}
                {{#GridLayout dimensions="[4,6]" size="[undefined,undefined]"}}
                {{#Surface size="[undefined,200]" origin="[0,0]" }}<img src="http://photos-f.ak.instagram.com/hphotos-ak-xfa1/10616600_789642611058461_2076006948_n.jpg"/>{{/Surface}}
                {{#Surface size="[undefined,500]"  origin="[0,0]" class="well"}}#a.2{{/Surface}}
                {{#Surface size="[undefined,300]" origin="[0,0]" class="well"}}#b.2{{/Surface}}
                {{#Surface size="[undefined,undefined]"  origin="[0,0]" class="well"}}#c.2{{/Surface}}
                {{#Surface size="[undefined,undefined]"  origin="[0,0]" class="well"}}#d.2{{/Surface}}
                {{#Surface size="[undefined,undefined]"  origin="[0,0]" class="well"}}#e.2{{/Surface}}
                {{#Surface size="[undefined,undefined]"  origin="[0,0]" class="well"}}#f.2{{/Surface}}
                {{#Surface size="[undefined,undefined]"  origin="[0,0]" class="well"}}#g.2{{/Surface}}
                {{#Surface size="[undefined,undefined]"  origin="[0,0]" class="well"}}#h.2{{/Surface}}
                {{#Surface size="[undefined,undefined]"  origin="[0,0]" class="well"}}#i.2{{/Surface}}
                {{#Surface size="[undefined,undefined]"  origin="[0,0]" class="well"}}#j.2{{/Surface}}
            {{/GridLayout}}
            {{#View size="[undefined,600]"}}
                {{#SequentialLayout direction="Y" size="[undefined,undefined]"}}
                    {{#Surface size="[150,50]" class="well"}}#1
                    <p>Nulla sagittis nulla ante, eget consectetur ex ullamcorper non. Sed ac nisl molestie nisi mollis facilisis. Suspendisse molestie ipsum et ultricies varius. Quisque velit nunc, pharetra molestie pulvinar id, varius ut mi. Quisque a vestibulum elit, scelerisque maximus ex. Phasellus eget vestibulum nulla. Nam placerat lobortis sem vitae sagittis. Vivamus blandit nulla quis tristique sagittis. Aenean et tempus arcu, cursus consectetur quam. Aliquam pellentesque commodo elit vitae tristique. Nam sit amet hendrerit diam.</p>
                    {{/Surface}}
                    {{#Surface size="[150,300]" class="well"}}#2{{/Surface}}
                    {{#Surface size="[150,100]" class="well"}}#3{{/Surface}}
                {{/SequentialLayout}}
            {{/View}}

        {{/GridLayout}}

    {{/GridLayout}}

{{/Scrollview}}

```

结果如下：

这是另一个例子，在ScrollView中使用SequentialLayout然后嵌套网格：

```

{{#Scrollview size="[undefined,200]"}}

    {{#SequentialLayout direction="Y" size="[undefined,undefined]"}}
        {{#GridLayout dimensions="[3,1]" size="[undefined,400]"}}
            {{#Surface size="[undefined,undefined]" class="well"}}col1
            <p>Nulla sagittis nulla ante, eget consectetur ex ullamcorper non. Sed ac nisl molestie nisi mollis facilisis. Suspendisse molestie ipsum et ultricies varius. Quisque velit nunc, pharetra molestie pulvinar id, varius ut mi. Quisque a vestibulum elit, scelerisque maximus ex. Phasellus eget vestibulum nulla. Nam placerat lobortis sem vitae sagittis. Vivamus blandit nulla quis tristique sagittis. Aenean et tempus arcu, cursus consectetur quam. Aliquam pellentesque commodo elit vitae tristique. Nam sit amet hendrerit diam.</p>

            {{/Surface}}
            {{#Surface size="[undefined,undefined]" class="well"}}col2{{/Surface}}
            {{#Surface size="[undefined,undefined]" class="well"}}col3{{/Surface}}
        {{/GridLayout}}

    {{/SequentialLayout}}



    {{#SequentialLayout direction="Y" size="[undefined,undefined]"}}
        {{#GridLayout dimensions="[2,1]" size="[undefined,200]"}}
        {{#Surface size="[undefined,undefined]" class="well"}}col1
        <p>Nulla sagittis nulla ante, eget consectetur ex ullamcorper non. Sed ac nisl molestie nisi mollis facilisis. Suspendisse molestie ipsum et ultricies varius. Quisque velit nunc, pharetra molestie pulvinar id, varius ut mi. Quisque a vestibulum elit, scelerisque maximus ex. Phasellus eget vestibulum nulla. Nam placerat lobortis sem vitae sagittis. Vivamus blandit nulla quis tristique sagittis. Aenean et tempus arcu, cursus consectetur quam. Aliquam pellentesque commodo elit vitae tristique. Nam sit amet hendrerit diam.</p>

        {{/Surface}}
        {{#Surface size="[undefined,undefined]" class="well"}}col2{{/Surface}}
        {{#Surface size="[undefined,undefined]" class="well"}}col3{{/Surface}}
        {{/GridLayout}}

    {{/SequentialLayout}}
{{#SequentialLayout direction="Y" size="[undefined,undefined]"}}
{{#GridLayout dimensions="[4,1]" size="[undefined,400]"}}
{{#Surface size="[undefined,undefined]" class="well"}}col1
<p>Nulla sagittis nulla ante, eget consectetur ex ullamcorper non. Sed ac nisl molestie nisi mollis facilisis. Suspendisse molestie ipsum et ultricies varius. Quisque velit nunc, pharetra molestie pulvinar id, varius ut mi. Quisque a vestibulum elit, scelerisque maximus ex. Phasellus eget vestibulum nulla. Nam placerat lobortis sem vitae sagittis. Vivamus blandit nulla quis tristique sagittis. Aenean et tempus arcu, cursus consectetur quam. Aliquam pellentesque commodo elit vitae tristique. Nam sit amet hendrerit diam.</p>

{{/Surface}}
{{#Surface size="[undefined,undefined]" class="well"}}col2{{/Surface}}
{{#Surface size="[undefined,undefined]" class="well"}}col3{{/Surface}}
{{/GridLayout}}

{{/SequentialLayout}}
{{#SequentialLayout direction="Y" size="[undefined,undefined]"}}
    {{#GridLayout dimensions="[4,1]" size="[undefined,200]"}}
        {{#GridLayout dimensions="[4,1]" size="[undefined,undefined]"}}
            {{#Surface size="[undefined,undefined]" class="well"}}col1
            <p>Nulla sagittis nulla ante, eget consectetur ex ullamcorper non. Sed ac nisl molestie nisi mollis facilisis. Suspendisse molestie ipsum et ultricies varius. Quisque velit nunc, pharetra molestie pulvinar id, varius ut mi. Quisque a vestibulum elit, scelerisque maximus ex. Phasellus eget vestibulum nulla. Nam placerat lobortis sem vitae sagittis. Vivamus blandit nulla quis tristique sagittis. Aenean et tempus arcu, cursus consectetur quam. Aliquam pellentesque commodo elit vitae tristique. Nam sit amet hendrerit diam.</p>

            {{/Surface}}
            {{#Surface size="[undefined,undefined]" class="well"}}col1
            <p>Nulla sagittis nulla ante, eget consectetur ex ullamcorper non. Sed ac nisl molestie nisi mollis facilisis. Suspendisse molestie ipsum et ultricies varius. Quisque velit nunc, pharetra molestie pulvinar id, varius ut mi. Quisque a vestibulum elit, scelerisque maximus ex. Phasellus eget vestibulum nulla. Nam placerat lobortis sem vitae sagittis. Vivamus blandit nulla quis tristique sagittis. Aenean et tempus arcu, cursus consectetur quam. Aliquam pellentesque commodo elit vitae tristique. Nam sit amet hendrerit diam.</p>

            {{/Surface}}
            {{#Surface size="[undefined,undefined]" class="well"}}col2{{/Surface}}
            {{#Surface size="[undefined,undefined]" class="well"}}col3{{/Surface}}
        {{/GridLayout}}
        {{#Surface size="[undefined,undefined]" class="well"}}col1
        <p>Nulla sagittis nulla ante, eget consectetur ex ullamcorper non. Sed ac nisl molestie nisi mollis facilisis. Suspendisse molestie ipsum et ultricies varius. Quisque velit nunc, pharetra molestie pulvinar id, varius ut mi. Quisque a vestibulum elit, scelerisque maximus ex. Phasellus eget vestibulum nulla. Nam placerat lobortis sem vitae sagittis. Vivamus blandit nulla quis tristique sagittis. Aenean et tempus arcu, cursus consectetur quam. Aliquam pellentesque commodo elit vitae tristique. Nam sit amet hendrerit diam.</p>

        {{/Surface}}
        {{#Surface size="[undefined,undefined]" class="well"}}col1
        <p>Nulla sagittis nulla ante, eget consectetur ex ullamcorper non. Sed ac nisl molestie nisi mollis facilisis. Suspendisse molestie ipsum et ultricies varius. Quisque velit nunc, pharetra molestie pulvinar id, varius ut mi. Quisque a vestibulum elit, scelerisque maximus ex. Phasellus eget vestibulum nulla. Nam placerat lobortis sem vitae sagittis. Vivamus blandit nulla quis tristique sagittis. Aenean et tempus arcu, cursus consectetur quam. Aliquam pellentesque commodo elit vitae tristique. Nam sit amet hendrerit diam.</p>

        {{/Surface}}
        {{#Surface size="[undefined,undefined]" class="well"}}col2{{/Surface}}
        {{#Surface size="[undefined,undefined]" class="well"}}col3{{/Surface}}
    {{/GridLayout}}

{{/SequentialLayout}}

{{/Scrollview}}

```

看起来像：