Question

我正在寻找一个事件，告诉我表面何时被渲染，所以我可以调用像surface.focus（）这样的方法。

如果我在创建曲面后立即调用焦点，则无效。如果我在一段任意时间之后在计时器中调用它，我希望它被渲染，它就可以了。所以必须有一个我可以使用的事件。

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

由于

Answer 1

我将johntraver的回答标记为答案，但我也希望为像我这样的知名人士这样的人提供一个完整的InputSurface工作示例。此代码将InputSurface子类化，以便焦点方法起作用。

一旦渲染了InputSurface，它就会获得焦点。

TextBox.js

define(function(require, exports, module) {
    var InputSurface      = require('famous/surfaces/InputSurface');
    var EventHandler      = require('famous/core/EventHandler');
    function TextBox(options) {
        InputSurface.apply(this, arguments);
        this._superDeploy = InputSurface.prototype.deploy;
    }
    TextBox.prototype = Object.create(InputSurface.prototype);
    TextBox.prototype.constructor = TextBox;
    TextBox.prototype.deploy = function deploy(target) {
        this.eventHandler.trigger('surface-has-rendered', this);
        this._superDeploy(target);
    };
    module.exports = TextBox;
});

实施

this.email = new TextBox({
    size: [300, 40],
    placeholder:'email'
});

var event_handler = new EventHandler();

event_handler.on('surface-has-rendered', function(control){
    control.focus();
});

this.email.pipe(event_handler);

Answer 2

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

在制作这个例子时发生了一个有趣的测试。如果刷新代码，并且grunt将更改推送到未打开的选项卡..在再次打开选项卡之前，不会触发该事件。有道理，但很高兴看到它！

这是我做的......

祝你好运！

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

Answer 3

我知道这已经得到了回答，几个月前都是这样。我只是想我会补充一点，目前你可以在没有子类化的情况下这样做：

var textbox = new InputSurface({
    size: [true,true],
    placeholder: 'Text'
});

textbox.on('deploy', function() {
    textbox.focus();
});

在famo.us中表面渲染事件

3 个答案: