Created
November 4, 2012 11:23
-
-
Save k33g/4011472 to your computer and use it in GitHub Desktop.
Backbone en Typescript
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/// <reference path="d.ts/backbone-0.9.ts"/> | |
declare var $: any; | |
declare var _: any; | |
declare var Mustache: any; | |
module Earth { | |
export class Human extends Backbone.Model { | |
initialize () { | |
//called by constructor | |
} | |
constructor (attributes?: any, options?: any) { | |
super(attributes, options); | |
} | |
get firstName() : string { | |
return this.get("firstName"); | |
} | |
set firstName(value : string) { | |
this.set("firstName", value); | |
} | |
get lastName() : string { | |
return this.get("lastName"); | |
} | |
set lastName(value : string) { | |
this.set("lastName", value); | |
} | |
} | |
export class People extends Backbone.Collection { | |
public model = Human; | |
} | |
export class HumansList extends Backbone.View { | |
public template:string = $("#humans_template").html(); | |
constructor (public collection:People) { | |
super(collection); | |
this.setElement($("#humans")); | |
_.bindAll(this, 'render'); | |
this.collection.bind('change', this.render); | |
} | |
render() { | |
var renderedContent = Mustache.to_html( | |
this.template, | |
{ humans : this.collection.toJSON()} | |
); | |
this.$el.html(renderedContent) | |
} | |
} | |
} | |
module instances { | |
export var bob = new Earth.Human({firstName:"Bob", lastName:"Morane"}); | |
export var sam = new Earth.Human({firstName:"Sam", lastName:"Le Pirate"}); | |
export var john = new Earth.Human({firstName:"John", lastName:"Doe"}); | |
export var jane = new Earth.Human({firstName:"Jane", lastName:"Doe"}); | |
export var humans = new Earth.People([bob, sam, john, jane]); | |
} | |
$(()=> { | |
var list = new Earth.HumansList(instances.humans); | |
list.render(); | |
}); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment