0

我在 Ember 上做事时遇到了麻烦，我敢肯定这是因为我还没有完全掌握做事的“Ember 方式”，而且我正在尝试做一些脱离标准教程的范围。

我正在开发某种带有建议的文本字段组件，它将出现在我的网络应用程序的每个页面中。我不会在这里询问有关如何做到这一点的所有细节，而只是问一些我从一开始就无法完成的具体事情。以下是我目前所拥有的相关代码片段。

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