4

メモを検索するための簡単な検索ボックスを Notes.Application に作成したいと思います。私はこのウェブサイト、Ember フォーム、Google を見ていますが、それほど多くの解決策はありません。見つけたのは 2 つだけで、私のアプリには収まりません。問題は、それを行う方法の一般的な考えがないことです。

これが私のアプリです：

<script type="text/x-handlebars" data-template-name="index">  
    <div class="wrap">
      <div class="bar">
      {{input type="text" class="search" placeholder="Where is my bookmark??" value=search action="query"}}

        <div class="bar-buttons">
          <button {{action "addNote"}}> NEW </button>
          <button> HOME </button>
        </div>
      </div>
      <aside>
        <h4 class="all-notes">All Notes {{length}}</h4>
          {{#each item in model}}
            <li>
              {{#link-to 'note' item}} {{item.title}} {{/link-to}}
            </li>
          {{/each}}
      </aside>
      {{outlet}}
    </div> 
</script>

コントローラ：

Notes.IndexController = Ember.ArrayController.extend ({
search: '',

actions:{
    query: function() {
      // the current value of the text field
      var query = this.get('search');
    },

    addNote: function () {
        this.transitionToRoute('main');
    }
}
});

モデル：

    Notes.Note = DS.Model.extend ({
    title: DS.attr('string'),
    body: DS.attr('string'),
    url: DS.attr('string')
    });

    Notes.Note.FIXTURES = [ 
    { 
    id: 1, 
    title:'hello world', 
    body: 'ciao ciao ciao ciao', 
    url: '' 
    }, 
    { 
    id: 2, 
    title: 'javascript frameworks',
    body: 'Backbone.js, Ember.js, Knockout.js', 
    url: '...'
    },
    {
     id: 3,
     title: 'Find a job in Berlin',
     body: 'Monster, beralinstartupjobs.com',
     url: '...'
    }
    ];

とにかく、これはまだハードコードされたデータであり、後でユーザーから動的に追加されたメモになります。

どんな提案でも大歓迎です。

4

1 に答える 1

8

arrangedContentのプロパティをオーバーライドして、これを行うことができますIndexController。

Notes.IndexController = Ember.ArrayController.extend ({
    search: '',    
    titleFilter: null,
    actions:{
        query: function() {
            // the current value of the text field
            var query = this.get('search');
            this.set('titleFilter', query);
        },
        addNote: function () {
            this.transitionToRoute('main');
        }
    },
    arrangedContent: function() {
        var search = this.get('search');
        if (!search) { return this.get('content') }

        return this.get('content').filter(function(note) {            
            return note.get('title').indexOf(search) != -1;
        })
    }.property('content', 'titleFilter')
});

そして、あなたのテンプレートで使用します{{#each item in arrangedContent}}

これを実際に見てくださいhttp://jsfiddle.net/marciojunior/v966z/

于 2013-11-04T13:11:55.903 に答える