CODEWITHSUNDEEP
ember.jshandlebars.js
iguider
iguider

Reputation: 721

How to trigger an action when an input gets focus?

I want to know how to trigger an action when an input gets focused..
right now I'm using this on my template: {{view "clickinput" class="form-control" placeholder="search..." value=s action="focus"}}
and this as the view:

export default Ember.TextField.extend({
  onEvent: 'focusIn',
  focusIn: function() {
    this.sendAction('focusIn', this, event);
  }
});

and this on my controller:

actions: {
  focus: function() {
    alert('f');
  }
}

but it doesn't work..
I get this error on chrome: Uncaught Error: Assertion Failed: The focusIn action was triggered on the component <appkit@view:clickinput::ember438>, but the action name (function superWrapper() { var ret, sup = this.__nextSuper; this.__nextSuper = superFunc; ret = func.apply(this, arguments); this.__nextSuper = sup; return ret; }) was not a string.

why?

Upvotes: 7

Views: 5542

Answers (2)

iguider
iguider

Reputation: 721

It turned out to be simpler than I thought..
I just had to write {{input class="form-control" placeholder="search..." value=s focus-in="focus"}} in my template

Upvotes: 16

Morgan Delaney
Morgan Delaney

Reputation: 2439

I used your answer as a starting point so thanks! Here's what worked for me:

Ember stats:

DEBUG: -------------------------------
DEBUG: Ember           : 1.7.1
DEBUG: Ember Data      : 1.0.0-beta.11
DEBUG: Handlebars      : 1.3.0
DEBUG: jQuery          : 2.1.3
DEBUG: Model Fragments : 0.2.7
DEBUG: -------------------------------

My generic functions, I call functions.js

Ember.TextField.reopen({
  attributeBindings: ['data-stripe'],
  focusIn: function() {
    return this.sendAction('focus-in');
  }
});

My controller

  actions: {
    focusField: function() {
      debugger;
    }
  }

My Handlebars template

{{input focus-in="focusField" type="tel" maxlength="20" data-stripe="number" placeholder="Card Number" value=input.number autocomplete="cc-number"}}

Upvotes: 0

Related Questions