Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
73 lines (61 sloc) 2.04 KB
import { Component, FormView, Model } from "../../../src/core";
import { HeroNameCollection } from "../Collection/HeroName";
import { HeroPowerCollection } from "../Collection/HeroPower";
@Component({
el: "ng-hero",
events: {
"submit form": "onSubmitForm"
},
collections: {
names: new HeroNameCollection(),
powers: new HeroPowerCollection()
},
template: `
<form data-ng-group="hero" novalidate>
<div class="form-group">
<i class="glyphicon glyphicon-user"></i>
<label for="name">Name</label>
<input id="name" list="names" name="name" type="text" class="form-control" required >
<datalist id="names">
<option data-ng-for="let n of names" data-ng-prop="'value', n.item">
</datalist>
<div class="alert alert-danger" data-ng-if="hero.group.dirty && !hero.name.valid">
Name is required
</div>
</div>
<div class="form-group">
<i class="glyphicon glyphicon-star-empty"></i>
<label for="power">Hero Power</label>
<select id="power" name="power" class="form-control" required>
<option data-ng-for="let p of powers" data-ng-text="p.item" >Nothing here</option>
</select>
<div class="alert alert-danger" data-ng-if="hero.group.dirty && !hero.power.valid">
Power is required
</div>
</div>
<button type="submit" class="btn btn-default" data-ng-prop="'disabled', !hero.group.valid">Submit</button>
</form>
`
})
export class HeroView extends FormView {
el: HTMLElement;
collections: NgBackbone.CollectionMap;
initialize() {
this.collections.get( "powers" ).fetch();
this.collections.get( "names" ).fetch();
this.render();
}
onSubmitForm( e:Event ){
let el = <HTMLFormElement> e.target;
e.preventDefault();
let collection = this.collections.get( "heroes" ),
data = this.getData( "hero" );
el.reset();
this.reset( "hero" );
if ( data[ "name" ] ) {
collection.create( data, {
error: console.error
});
}
}
}