2

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

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

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

谢谢

4

3 回答 3

3

我将 johntraver 的回复标记为答案，但我还想为像我这样刚学成名的人提供 InputSurface 的完整工作示例。此代码子类 InputSurface 以便焦点方法可以工作。

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

文本框.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);
于 2014-04-28T02:22:25.097 回答
2

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

在制作这个例子时发生了一个有趣的测试。如果您刷新代码，并且 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);
于 2014-04-26T17:37:28.363 回答
1

我知道这已经得到了回答，不管是几个月前。我只是想我会补充一点，目前您可以在不进行子类化的情况下执行此操作，如下所示：

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

textbox.on('deploy', function() {
    textbox.focus();
});
于 2014-10-21T20:30:42.170 回答