如何在famo.us表面中包含可单击的表单

Question

如果我有一个包含输入的表面。输入似乎没有得到关注点击。

以下是我如何加入表面。

var ConfigureView = function() {
    this.initialize.apply(this, arguments);
};

_.extend(ConfigureView.prototype, {

    template: templates['config'],
    initialize: function( options ) {

        var position = new Transitionable([0, 0]);]

        var sync = new GenericSync({
            "mouse"  : {},
            "touch"  : {}
        });

        this.surface = new Surface({
            size : [200, 200],
            properties : {background : 'red'},
            content: this.template()
        });

        // now surface's events are piped to `MouseSync`, `TouchSync` and `ScrollSync`
        this.surface.pipe(sync);

        sync.on('update', function(data){
            var currentPosition = position.get();
            position.set([
                currentPosition[0] + data.delta[0],
                currentPosition[1] + data.delta[1]
            ]);
        });

        this.positionModifier = new Modifier({
            transform : function(){
                var currentPosition = position.get();
                return Transform.translate(currentPosition[0], currentPosition[1], 0);
            }
        });

        var centerModifier = new Modifier({origin : [0.5, 0.5]});
        centerModifier.setTransform(Transform.translate(0,0));

    },

    addTo: function(context) {
        context = Engine.createContext()
        context.add(this.positionModifier).add(this.surface);
    }

});

module.exports = ConfigureView;

使用famo.us使表格正常运作有什么必要？

或者我只需要一个内部表面有不同的听众？

这是模板['config']：

templates["config"] = Handlebars.template({"compiler":[5,">= 2.0.0"],"main":function(depth0,helpers,partials,data) {
  return "<input type=\"text\" id=\"fontSize\" >";
  },"useData":true});

什么显示是我似乎无法专注于它的输入。

更新

我认为无法关注的原因是因为我没有使用inputSurface而且表面事件正在被移除。使用scrollView我能够使它工作。

var ConfigureView = function() {
    this.initialize.apply(this, arguments);
};

_.extend(ConfigureView.prototype, {

    template: templates['config'],
    initialize: function( options ) {

        this.app = options.app;

        var position = new Transitionable([0, 0, 1000]);

        this.scrollView = new ScrollView();
        var surfaces = [];
        this.scrollView.sequenceFrom(surfaces);

        // create a sync from the registered SYNC_IDs
        // here we define default options for `mouse` and `touch` while
        // scrolling sensitivity is scaled down
        var sync = new GenericSync({
            "mouse"  : {},
            "touch"  : {}
        });

        this.surface = new Surface({
            size : [200, 200],
            properties : {background : 'red'},
            content: this.template()
        });

        surfaces.push(this.surface);

        this.offsetMod = new Modifier({ origin: [0.2,0,2]});
        this.inner = new Surface({
            size : [100, 100],
            properties : {background : 'gray'},
            content: this.template()
        });

        surfaces.push(this.inner);

        // now surface's events are piped to `MouseSync`, `TouchSync` and `ScrollSync`
        this.surface.pipe(sync);

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

        sync.on('update', function(data){
            var currentPosition = position.get();
            position.set([
                currentPosition[0] + data.delta[0],
                currentPosition[1] + data.delta[1]
            ]);
        });

        this.positionModifier = new Modifier({
            transform : function(){
                var currentPosition = position.get();
                return Transform.translate(currentPosition[0], currentPosition[1], 0);
            }
        });

        var centerModifier = new Modifier({origin : [0.5, 0.5]});
        centerModifier.setTransform(Transform.translate(0,0));//, y, z))

    },

    addTo: function(context) {
        context = Engine.createContext();
        context.add(this.positionModifier).add(this.scrollView);
    }

});

module.exports = ConfigureView;