Filter data client side

@SurfMan wrote:

I am getting my feet wet with Ember. I have followed Zoltan Debre's excellent tutorial on www.yoember.com. It all looks very promising and I quickly got the hang of the basics. (For those who don't know the tutorial, it lets you create a library system with books and authors.)

I decided to give myself a little challenge and created a page that lists all the books. I was pleasantly surprised to see I got it to work in minutes. Now, for the next challenge, I wanted a filter text box: one that will reduce the list while you type. That seemed a challenge indeed...

My problem basically is that I don't know how to connect all the dots. Where do I put what code? I have a book-filter component which receives the filter term. It then uses sendAction() to trigger an action in my route. But then what? It's all quite a black box.

Things that I have considered: - A controller for books/index. The offical docs sort of discourage the use of controllers. - Computed properties, but where?

I would really appreciate if someone nudged me in the right direction. Here's some code to clarify:

//app/routes/books/index.js
export default Ember.Route.extend({

    model() {
        return this.store.findAll('book');
    },

    actions: {
        filterBooks: function (filterTerm) {
            console.log(filterTerm); //this prints whatever I have typed in the filter box
        }
    }

});

//app/templates/books/index.hbs
<h2>List</h2>

{{book-filter doFilter='filterBooks' model=model}}

<div class="row">
    {{#each model as |book|}}
        <div class="col-md-4">
            {{book-info item=book}}
        </div>
    {{/each}}
</div>

//app/components/book-filter.js
import Ember from 'ember';

export default Ember.Component.extend({
    filter: '',

    actions: {
        filter() {
            var filtertext = this.get('filter');
            this.sendAction('doFilter', filtertext);
        }
    }
});

<!--/app/templates/components/book-filter.hbs-->
<div class="row margin-bottom">
    <div class="col-md-6">
        <div class="input-group">
            <span class="input-group-addon">@</span>
            {{input value=filter class="form-control" placeholder="Filter" }}
            <span class="input-group-btn">
                <button class="btn btn-default" {{action 'filter'}}>Go!</button>
             </span>
        </div>
    </div>
</div>

Posts: 3

Participants: 2

Read full topic