famo.us中的表面渲染事件 [英] Surface render events in famo.us

问题描述

我正在寻找一个告诉我何时渲染表面的事件，因此我可以调用诸如surface.focus()之类的方法.

I'm looking for an event that tells me when a surface has been rendered so I can call methods like surface.focus().

如果我在创建曲面后立即调用焦点，则它将不起作用.如果我在任意时间后在计时器中调用它，我希望它会被渲染，它将起作用.因此必须有一个我可以使用的事件.

If I call focus immediately after I create the surface it doesn't work. If I call it in a timer after some arbitrary time I expect it to be rendered, it works. So there must be an event I can use.

例如，如果我创建一个在视图内部构建一堆表面的窗口小部件，那么我如何知道该窗口小部件何时已完全构建，更重要的是，何时渲染该窗口小部件，以便可以将焦点设置在输入表面上?

For example if I create a widget that builds a bunch of surfaces inside a view, how do I know when that widget has been fully built and more importantly, when is it being rendered so I can set focus on an input surface?

谢谢

推荐答案

这是另一种情况，当子类化可能是您最简单，最直接的方法.在此示例中，Surface是子类的，并且我确信可以获取Surface的deploy函数并将其绑定到MySurface实例以供以后使用.然后，当我们稍后覆盖部署时，我们可以为表面调用super，而不必担心更改核心代码.eventHandler是Surface内置的属性，因此可用于发送render事件.

This is another case of when subclassing may be your easiest and most straight forward approach. In this example, Surface is subclassed and I am sure to grab the deploy function of the Surface and bind it to the MySurface instance for later use. Then when we override deploy later on, we can call super for the surface and not have to worry about altering core code. eventHandler is a property built into Surface, so that is used to send the render event.

制作此示例时发生了一个有趣的测试.如果刷新代码，并且grunt会将更改推送到未打开的选项卡，则不会触发您的事件，除非再次打开该选项卡.有道理，但很高兴见到！

An interesting test happened while making this example. If you refresh the code, and grunt pushes the changes to an unopened tab.. You event will not be fired until you open the tab again. Makes sense, but it was nice to see!

这是我的工作.

祝你好运！

var Engine            = require('famous/core/Engine');
var Surface           = require('famous/core/Surface');
var StateModifier     = require('famous/modifiers/StateModifier');
var EventHandler      = require('famous/core/EventHandler')


function MySurface(options) {
    Surface.apply(this, arguments);
    this._superDeploy = Surface.prototype.deploy
}

MySurface.prototype = Object.create(Surface.prototype);
MySurface.prototype.constructor = MySurface;

MySurface.prototype.elementType = 'div';
MySurface.prototype.elementClass = 'famous-surface';


MySurface.prototype.deploy = function deploy(target) {
  this._superDeploy(target);
  this.eventHandler.trigger('surface-has-rendered', this);
};


var context = Engine.createContext();

var event_handler = new EventHandler();

event_handler.on('surface-has-rendered', function(data){
  console.log("Hello Render!");
  console.log(data);
})

var surface = new MySurface({
  size: [200,200],
  content: "Hello",
  properties: {
    color: 'white',
    textAlign: 'center',
    lineHeight: '200px',
    backgroundColor: 'green'
  }
});

surface.pipe(event_handler);

context.add(new StateModifier({origin:[0.5,0.5]})).add(surface);

这篇关于famo.us中的表面渲染事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！