Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
82 lines (66 sloc) 2.28 KB
import { Collection, Component, View, Model } from "../../../src/core";
import { HeroCollection } from "../Collection/Hero";
@Component({
el: "ng-herolist",
events: {
"change [data-bind=checkbox]": "onSelect",
"click [data-sort]": "onClickSort",
"click [data-bind=remove]": "onClickRemoveGroup",
"click [data-bind=markall]": "onSelectAll"
},
template: `
<table class="table">
<tr>
<th data-bind="markall"><i class="glyphicon glyphicon-ok"></i>&nbsp;</th>
<th data-sort="name">Name <i data-ng-class="'is-inactive', heroes.order !== 'name'" class="glyphicon glyphicon-chevron-down pull-right is-inactive"></i></th>
<th data-sort="power">Power <i data-ng-class="'is-inactive', heroes.order !== 'power'" class="glyphicon glyphicon-chevron-down pull-right is-inactive"></i></th>
</tr>
<tr data-ng-for="let hero of heroes" class="list__tool-row">
<td>
<label>
<input data-bind="checkbox" type="checkbox" data-ng-data="'id', hero.id" data-ng-attr="'checked', hero.selected" />
</label>
</td>
<td data-ng-text="hero.name" ></td>
<td data-ng-text="hero.power" ></td>
</tr>
</table>
<div class="row">
<span><span data-ng-text="heroes.selected.length">0</span> selected items</span>
<button data-bind="remove" class="btn btn-danger" data-ng-if="heroes.selected.length">Remove selected</button>
</div>
`
})
export class HeroListView extends View {
el: HTMLElement;
collections: NgBackbone.CollectionMap;
heroes: HeroCollection;
toggle: boolean = false;
initialize() {
this.heroes = this.collections.get( "heroes" ) as HeroCollection;
this.heroes.fetch();
this.render();
}
onSelect( e: Event ){
let el = e.target as HTMLInputElement,
model = this.heroes.get( el.dataset[ "id" ] ),
selected = model.get( "selected" );
model.set( "selected", !selected );
}
onSelectAll(){
this.toggle= !this.toggle;
this.heroes.forEach(( model: Model ) => {
model.set( "selected", this.toggle);
});
}
onClickRemoveGroup(){
this.heroes.getSelected().forEach( ( model: Model ) => model.destroy() );
}
onClickSort( e:Event ) {
let el = <HTMLElement>e.target,
order: string = el.dataset[ "sort" ],
heroes = this.heroes as HeroCollection;
e.preventDefault();
heroes.orderBy( order );
}
}