使用Ember JS實施自動完成

Question

我正在嘗試使用人員列表來實現自動完成搜索。 我希望列表隨着用戶輸入所需名稱而縮小。

我從Embercasts的家伙那里找到了很好的資源，但不幸的是他們沒有完成第2部分。

視頻：

http://www.embercasts.com/episodes/building-an-autocomplete-widget-part-1

源代碼：

https://github.com/embercasts/building-an-autocomplete-widget

我不了解以下內容：

• 如何指示我要自動完成過濾的模型？ 演示代碼使用數組，但是我無法弄清楚如何使用模型並按nameFirst和nameLast名稱進行過濾。

數據：

App.Swimmer = DS.Model.extend({
    nameFirst: DS.attr(),
    nameLast: DS.attr(),
    level: DS.attr(),
    birthdate: DS.attr(),
    gender: DS.attr(),
    note:DS.attr(),
    lesson: DS.belongsTo('lesson', {async: true}),
    family:DS.belongsTo('family',{async: true})
});

我們將不勝感激快速演示如何使用模型和夾具數據來實現此自動完成。

Answer 1

需要注意的是FixtureAdapter不支持查詢邏輯。 這是一個未經測試的（！）解決方案，可以與RESTAdapter一起使用...

Javascript：

App.SwimmerController = Ember.ObjectController.extend({
    filterFirst: null,
    filterLast: null,
    filteredMatches: function() {
        return this.store.find('swimmer', {
            nameFirst: this.get('filterFirst'),
            nameLast: this.get('filterLast')
        });
    }.property('filterFirst', 'filterLast')
});

模板：

<div>
    <em>First:</em>{{input value=filterFirst}} <em>Last:</em>{{input value=filterLast}}
</div>
<ul>
    {{#each result in filteredMatches}}
        <li>{{result.nameFirst}} {{result.nameLast}}</li>
    {{else}}
        <em>No matches found!</em>
    {{/each}}
<ul/>