famo.us 的属性

Question

在创建 InputSurface 时，我无法让各种属性发挥作用，例如自动对焦或 maxLength。

this.email = new InputSurface({
        classes: ['login-form'],
        content: '',
        size: [300, 40],
        placeholder:'email',
        properties: {
            autofocus:'autofocus',
            maxLength:'5',
            textAlign: 'left'
        }
    });

渲染的 div 缺少我设置的属性。

<input class="famous-surface login-form" placeholder="email" type="text" name="" style="-webkit-transform-origin: 0% 0%; opacity: 0.999999; -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 614.5, 273.5, 0, 1); text-align: left; width: 300px; height: 40px;">

显然，电子邮件的 maxLength 为 5 是愚蠢的，但我只是想看看它是否可以工作，但我可以继续输入超过 5 的内容，并且当渲染表面时，它没有聚焦。有任何想法吗？我查看了示例/演示，但找不到使用这些属性中的任何一个或自动对焦的输入表面。

Answer 1

正如 dmvaldman 所建议的，这还不是一个功能，所以下面的 hack 现在将使它成为一个功能。

显然不是一个长期的解决方案，但我在 InputSurface.js 中添加了几行，属性现在被消耗掉了。

首先我添加了分配_attributes的单行

function InputSurface(options) {
    this._placeholder = options.placeholder || '';
    this._value       = options.value || '';
    this._type        = options.type || 'text';
    this._name        = options.name || '';
    this._attributes = options.attributes || '';

    Surface.apply(this, arguments);
    this.on('click', this.focus.bind(this));
}

然后我添加了for循环消耗部分来部署。

InputSurface.prototype.deploy = function deploy(target) {
    if (this._placeholder !== '') target.placeholder = this._placeholder;
    target.value = this._value;
    target.type = this._type;
    target.name = this._name;

    for (var n in this._attributes) {
        target[n] = this._attributes[n];
    }
};

所以现在我可以做到以下几点：

    this.email = new InputSurface({
        classes: ['login-form'],
        content: '',
        size: [300, 40],
        placeholder:'email',
        attributes: {
            autofocus:'autofocus',
            maxLength:5
        }
    });

再次，我意识到修改核心代码不是一个长期的解决方案，我现在只是需要一些东西，直到有人给出“官方”答案，这对我有用。

Answer 2

properties 对象仅适用于 CSS 属性，不适用于 HTML 属性，例如 maxLength 和 autoFocus。 Famo.us 即将支持泛型属性，目前 inputSurface 仅支持占位符、值、类型和名称。