在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上設計一個自定義的組件/視圖

回答

相關問題