2015年7月26日 星期日

ember filterExample

 **html**
   <div class="col-sm-12">
            {{input type="text" value=search placeholder="filter 'phone' field...."}}
        </div>

  <ul class="list-group">
            {{#each filterResult as |phone| }} {{#link-to 'phones.viewPhone' phone.objectId}}
            <li {{ bindAttr class=":list-group-item" }}>
                {{phone.phone}}
            </li>
            {{/link-to}} {{/each}}

            <br>
        </ul>

  **html**

App.PhonesController = Ember.Controller.extend({

    search: '',
    filterResult: function() {
        var model = this.get('model');
        var search = this.get('search');
        if (Ember.isEmpty(search)) {

            return model;
        }
        Ember.Logger.log('PhonesController filterResult search:' + this.get('search'));
        var result = model.filter(function(item, index, self) {
            //Ember.Logger.log('PhonesController model.filter item:'+JSON.stringify(item));
            //item:{"first":"544","last":"121","phone":"0938","objectId":"D61qwtLr6g","createdAt":"2015-07-25T13:18:33.600Z","updatedAt":"2015-07-25T13:18:33.600Z"}"
            if (item['phone'].indexOf(search) >= 0) {
                return true;
            }
        });
        return result;

//model is route's model not local var!!
//if not in property then model change ,the filterResult can't trigger!!!
    }.property('search','model'),
    init: function() {
        this._super();
        Ember.Logger.log('PhonesController now init...');
    },
    actions: {
        parseList: function() {
            console.log("PhonesController send('parseListAction')");
            return this.send('parseListAction');
        },
        filterResult: function() {
            return this.filterResult();
        },
        addClick: function() {
            this.transitionToRoute('phones.add');
        }

    }




});

沒有留言:

張貼留言