Question

I’m having trouble doing things on Ember, and I’m sure it’s because I still haven’t fully grasped “the Ember way” of doing things, and I’m a trying to do a couple of things that get out of the scope of standard tutorials out there.

I’m developing some sort of textfield-with-suggestions component that will appear in every single page of my web app. I won’t ask here all the details on how to do it, but just a couple specific things I am having trouble accomplishing from the start. The following are the relevant code fragments of what I have so far.

// handlebars template: searchbar.hbs
{{view App.SearchField viewName="searchField"}}
<div class="results" {{bindAttr class="searchField.hasFocus"}}>
  This is where the results for whatever the user has typed are shown.
</div>

// coffeescript source of the views: searchbar.coffee
App.SearchBar: Ember.View.extend
  templateName: 'searchbar'

App.SearchField: Ember.TextField.extend
  placeholder: 'Search'
  hasFocus: false
  eventManager: Ember.Object.create
    focusIn: (event, view) ->
      @set('hasFocus', true)
    focusOut: (event, view) ->
      @set('hasFocus', false)

// somewhere in the layout of the pages in my app
<div id="header">
  {{App.SearchBar}}
</div>

This will probably also need a controller, but I haven’t developed it yet, because I don’t know where it fits within this setup yet.

First, I want the suggestions popup panel to appear as soon as the search field obtains focus. That’s the reason of my attempt above to implement a hasFocus property on the searchfield. But how do I achieve making my div.results panel react to the focus state of the input field?

In general, and this is the core of my question here, how do I connect all things to develop this component? If the answer is by attaching it to a controller, then how do I setup a controller for this component, and how do I specify that it is the controller for it, so that it acts as a context for everything?

Answer 1

I think you have to clearly separate concerns. Stuff related to the view (ie manipulating the DOM with jquery) should stay in the view. Stuff related to the application state should be in the controller. Though,in your case, I think you can simply bind an observer on the hasFocus property, and show the suggestions. Something like:

App.SearchField: Ember.TextField.extend
  placeholder: 'Search'
  hasFocus: false
  eventManager: Ember.Object.create
    focusIn: (event, view) ->
      @set('hasFocus', true)
    focusOut: (event, view) ->
      @set('hasFocus', false)

  focusDidChange: (->
    if @hasFocus 
      $('.results')... // here I let you do the suggestion stuff 
                       // based on data retrieved from the controller
    else
       // probably hide the results div.
  ).observes('hasFocus')