如何使famo.us重新计算大小？

Question

我有一个正在插入div的滚动视图。

但是，这些div的内容是由javascript模板引擎呈现的。

当famo.us最初创建此页面时，它似乎计算出div内容的高度为零，因此滚动视图中的div最终都位于对方之上。我猜这是因为模板渲染发生了几次之后.

是否有办法强制famo.us重新计算/再流其布局？

Answer 1

我也欠johntraver一杯啤酒，因为他在这里对famo.us问题有了很好的回答。这是从他之前的一个答案中得出的工作，我将它用于具有动态html内容(和高度)的滚动视图上的曲面：

/* AutoSurface.js */

define(function(require, exports, module) {
    var Surface = require('famous/core/Surface');
    var Entity = require('famous/core/Entity');

    function AutoSurface(options) {
        Surface.apply(this, arguments);
        this.hasTrueSize = false;
        this._superCommit = Surface.prototype.commit;
    }

    AutoSurface.prototype = Object.create(Surface.prototype);

    AutoSurface.prototype.constructor = AutoSurface;

    AutoSurface.prototype.commit = function commit(context) {
        this._superCommit(context);
        if (!this.hasTrueSize) {
            this.trueHeight = Entity.get(this.id)._currTarget.clientHeight;
            this.setSize([undefined,this.trueHeight]);
            this.hasTrueSize = true;
        }
    }

    module.exports = AutoSurface;
});

每一个滴答都会调用Commit，所以在设置hasTrueSize = true之前，您应该能够等到高度超过0或所需的高度。

Answer 2

这与我刚才在这里发布的答案非常相似。

如何最好地在famo.us中创建单个可滚动视图？

您可以将真实尺寸的表面封装在一个尺寸修饰符中。这允许滚动视图知道内部表面的实际高度，从而正确滚动。我正在使用_currTarget的曲面在修饰符sizeFrom方法。三值操作是为了防止表面预先展开的错误.

下面是为滚动视图中的多个单元格修改的示例。希望能帮上忙！

var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var RenderNode = require('famous/core/RenderNode');
var Modifier = require('famous/core/Modifier');
var Scrollview  = require('famous/views/Scrollview');

var context = Engine.createContext();

var content = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod \
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, \
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo \
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse \
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non \
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";

var scrollview = new Scrollview();

var surfaces = [];
scrollview.sequenceFrom(surfaces);

for (var i = 0; i < 10; i++) {
    var surface = new Surface({
        size:[undefined,true],
        content: content,
        properties:{
            fontSize:'24px',
            backgroundColor:'hsl('+(i*360/20)+',100%,50%)'
        }
    })

    surface.pipe(scrollview);

    surface.node = new RenderNode();
    surface.mod = new Modifier();

    surface.mod.sizeFrom(function(){
        target = this._currTarget;
        return target ? [undefined,target.offsetHeight] : [undefined,true];
    }.bind(surface));

    surface.node.add(surface.mod).add(surface);

    surfaces.push(surface.node);
};

context.add(scrollview);

Answer 3

与其对使用deploy的sizeFrom-modifier进行黑客攻击，还有一个容易得多的攻击：

让一个曲面返回它的实际计算高度，而不是它指定的高度。

使用以下内容覆盖默认的getSize函数：

surface.getSize = function() { return this._size || this.size }

JSFiddle中的完整示例

警告：，这破坏了在呈现树上设置修饰符的大小。(但由于您已经明确地设置了大小，所以这不应该是一个问题)