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');
}
}
});
沒有留言:
張貼留言