0

私は Ember で物事を行うのに苦労しています。それは、物事を行うための「Ember のやり方」をまだ完全に把握していないためだと確信しています。そこにある標準的なチュートリアルの範囲。

Web アプリのすべてのページに表示される、ある種の提案付きテキスト フィールド コンポーネントを開発しています。ここでは、その方法の詳細をすべて尋ねることはしませんが、最初から達成するのに苦労しているいくつかの特定のことだけを尋ねます. 以下は、私がこれまでに持っているものの関連するコードの断片です。

// 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>

これにはおそらくコントローラーも必要ですが、このセットアップのどこに収まるかまだわからないため、まだ開発していません。

まず、検索フィールドがフォーカスされるとすぐに候補ポップアップ パネルが表示されるようにします。これが、上記で検索フィールドに hasFocus プロパティを実装しようとした理由です。しかし、div.results パネルを入力フィールドのフォーカス状態に反応させるにはどうすればよいでしょうか?

一般的に、これが私の質問の核心です。このコンポーネントを開発するためにすべてのものをどのように接続すればよいでしょうか? 答えがコントローラーにアタッチすることである場合、このコンポーネントのコントローラーをセットアップするにはどうすればよいですか?また、それがすべてのコンテキストとして機能するように、それがコントローラーであることを指定するにはどうすればよいでしょうか?

4

1 に答える 1

1

懸念事項を明確に分離する必要があると思います。ビューに関連するもの (つまり、jquery で DOM を操作すること) はビューにとどまるべきです。アプリケーションの状態に関連するものは、コントローラーにある必要があります。ただし、あなたの場合、オブザーバーを hasFocus プロパティにバインドして、提案を表示するだけでよいと思います。何かのようなもの：

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')
于 2012-11-16T19:45:04.720 に答える