Блог

Если у меня есть поверхность, которая содержит содержимое, включающее входные данные. Ввод, похоже, не фокусируется на щелчке.

Вот как я включаю свою поверхность.

 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, а событие surface удалялось. Используя 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;