A criação de componentes em Ember é algo extremamente útil e simples. Existem inúmeras vantagens em criar componentes para as suas aplicações, porém este não é o assunto deste post. Aqui vou falar apenas de uma técnica interessante na criação de componentes.

Imagine que você queira permitir que algum pedaço de script externo ao componente chame um método definido dentro do componente. Para isso precisamos de uma referência ao componente, o que não existe de forma automática.

Neste post vou mostrar como expor esta referência ao componente de forma a permitir este tipo de chamada.

Tomemos como exemplo um componente que faz lookup de registros:

FocusApp.InputAutocompleteComponent = Ember.Component.extend(Ember.TextSupport, {
  ...
  funcaoAExportar: ->
    alert('Minha função a ser chamada de fora do componente')
  ...
})

Agora vamos imaginar que eu queira expor uma referência a este componente de forma que um script externo tenha a possibilidade de chamar as suas funções internas. Posso fazer isto atribuindo a uma propriedade qualquer o valor de this, no momento da inicialização do componente. Assim:

_register: (->
  @set('componentReference', @)
).on('init')

Basta eu fazer o bind com uma variável externa na tag do componente.

{{input-autocomplete ... componentReference=supplierComponent}}

Pronto! A partir daqui podemos chamar as funções internas do componente utilizando a referência a ele:

@get('supplierComponent').funcaoAExportar()

Uma observação importante é que muitas vezes podemos resolver os problemas sem precisar deste acesso a todo o componente. Podemos fazer com que o componente reaja a alterações em propriedades internas a ele que estão ligadas a propriedades externas através do binding.