文本字段使用燼+餘燼數據過濾列表

Question

我新使用燼，但已經熟悉它，基本上遵循一些教程在這裏和那裏，並閱讀api文檔。但教程不會深入到更復雜的主題。

這些是細節：我已經實現了一個顯示項目列表的網頁。以下是應用程序不同部分的相關代碼摘錄。

// the data model, the view and the controller 
App.Item = DS.Model.extend({ 
    name: DS.attr('string') 
}); 
App.ItemsController = Ember.ArrayController.extend(); 
App.ItemsView = Ember.View.extend({ templateName: 'items' }) 

// in the router's corresponding route 
connectOutlets: function(router) { 
    router.get('applicationController').connectOutlet('items', App.Item.find()) 
} 

// in the handlebars template 
<ul class="items"> 
    {{#each content}} 
    <li>{{name}}</li> 
    {{/each}} 
</ul> 

對於該列表中的數據經由余燼數據遠程加載（請注意在路線的上述connectOutlet方法App.Item.find()呼叫）和一個車把模板顯示它，並動態地更新列表作爲數據的變化。到這裏，這是基本的燼。

現在我想要在列表頂部有一個文本字段，並且當用戶在此文本字段中輸入時，應通過篩選並僅顯示名稱與用戶匹配的項目來更新列表在打字。關於什麼是匹配名稱的實際定義與這個問題無關。它可能是那些包含鍵入字符串的名稱，或者是以它開頭的名稱。

我知道我的下一個步驟是包括在名單中的車把模板頂部的文本框的觀點：

<div class="search-bar"> 
    {{view Ember.TextField}} 
</div> 
<ul class="items"> 
    {{#each content}} 
    <li>{{name}}</li> 
    {{/each}} 
</ul> 

所以我的問題在這一點上有以下幾種：

• 怎麼辦我在javascript代碼中引用這個文本字段，所以我可以附加一個偵聽器來檢測它何時發生變化？
• 更重要的是，我需要在這個事件監聽器內部做些什麼，這樣列表纔會被過濾掉？
• 我想知道如何實現過濾本地加載的數據，以及如何通過每次用戶類型遠程加載過濾數據來實現它。

我實際上需要實現一些比這更復雜的事情，但知道如何做到這一點會有所幫助。

Answer 1

您可以在控制器上擁有一個計算屬性，用於根據文本字段過濾內容。

App.ItemsController = Ember.ArrayController.extend({ 

    // ... 

    searchedContent: function() { 
    var regexp = new RegExp(this.get('search')); 

    return this.get('content').filter(function(item) { 
     return regexp.test(item.get('name')); 
    }); 

    }.property('search', 'content.@each.name') 
}); 

然後你只是你的文本字段綁定到controller.search。例如：http://www.emberplay.com#/workspace/2356272909

要遠程過濾數據，您應該每次搜索更改時都會加載更多的項目。這可以通過每次發生變化時向路由器發送事件來完成。