在emberjs上设计一个自定义的组件/视图

我在Ember上做事情时遇到了麻烦，而且我确定这是因为我还没有完全掌握“Ember方式”的做事方式，而我正在尝试去做一些超出标准教程范围的东西。在emberjs上设计一个自定义的组件/视图

我正在开发某种textfield-with-suggestions组件，它将出现在我的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面板对输入字段的焦点状态做出反应？

一般来说，这是我的问题的核心在这里，我如何连接所有的东西来开发这个组件？如果答案是通过将它附加到控制器上，那么我如何为这个组件设置一个控制器，以及如何指定它是它的控制器，以便它充当一切的上下文？

来源

2012-11-16 Ernesto

要添加控制器，在您的视图类中，您可以说'controllerBinding：'App.YourContorller'，并且该视图将与'controller'对话。此外，你可能想看看['classNameBindings']（http://emberjs.com/api/classes/Ember.View.html#property_classNameBindings）。这里有一个使用它的示例：http://jsfiddle.net/schawaska/7Uk7J/ – MilkyWayJoe

我认为你必须明确分开关注点。与视图相关的东西（即用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-16 19:45:04

我更喜欢寻找一种方法，我有一个控制器将所有这些绑定在一起，因为对输入字段的焦点状态的反应只有一个在我需要做的很多其他事情中。我希望得到答案的核心问题是我的文章的最后一句话：**“如何为这个组件设置一个控制器，以及如何指定它是它的控制器，以便它能够执行作为一切的背景？“** – Ernesto

控制器可以是任何Ember.Object实例，注入模板，如{{App.SearchBar controllerBinding =”App.searchBarController“}}。然后，我认为它将可用于SearchBarView的所有子视图，只需使用控制器属性即可。 –

在emberjs上设计一个自定义的组件/视图

回答

相关问题