diff --git a/backbone.layoutmanager/backbone.layoutmanager-tests.ts b/backbone.layoutmanager/backbone.layoutmanager-tests.ts new file mode 100644 index 000000000..93c87cf19 --- /dev/null +++ b/backbone.layoutmanager/backbone.layoutmanager-tests.ts @@ -0,0 +1,59 @@ +/// +/// +/// + +// Example code. +class DisplayView extends Backbone.View { + constructor(options?: Backbone.ViewOptions) { + super(options); + this.manage = true; + this.template = "#display"; + } + manage: boolean; + template: string; +} + +// Create a View to be used with the Layout below. +class View extends Backbone.Layout { + constructor(options?: Backbone.LayoutOptions) { + super(options); + this.template = "#view"; + + // When you click the View contents, it will wrap them in a bold tag. + this.events = { + "click": "wrapElement", + "mouseenter": "insertElement", + "mouseleave": "removeElement" + } + } + + wrapElement(): void { + this.$el.wrap(""); + } + + insertElement(): void { + this.insertView(new DisplayView()).render(); + } + + removeElement(): void { + // Removes the inserted DisplayView. + this.removeView(""); + } +} + +// Create a new Layout. +var layout = new Backbone.Layout({ + // Attach the Layout to the main container. + el: ".main", + + // Use the previous defined template. + template: "#layout", + + // Declaratively bind a nested View to the Layout. + views: { + "p": new View() + } +}); + +// Render the Layout. +layout.render(); \ No newline at end of file diff --git a/backbone.layoutmanager/backbone.layoutmanager.d.ts b/backbone.layoutmanager/backbone.layoutmanager.d.ts new file mode 100644 index 000000000..6c830d0ba --- /dev/null +++ b/backbone.layoutmanager/backbone.layoutmanager.d.ts @@ -0,0 +1,56 @@ +// Type definitions for Backbone.LayoutManager 0.9.5 +// Project: http://layoutmanager.org/ +// Definitions by: He Jiang +// Definitions: https://github.com/hejiang2000/DefinitelyTyped + +/// +/// +/// + +declare module Backbone { + + interface LayoutOptions extends ViewOptions { + template?: string; + } + + interface LayoutManagerOptions { + manage?: boolean; + el?: boolean; + } + + class Layout extends View { + template: string; + constructor(options?: LayoutOptions); + + beforeRender(): void; + afterRender(): void; + cleanup(): void; + + fetchTemplate(path: string): (context:any)=>string; + async():(compiled:(context:any)=>void)=>void; + promise(): JQueryPromise; + + getAllOptions(): LayoutOptions; + + getView(fn?:any): any; + getViews(fn?:any): any[]; + + insertView(selector:any, view?:any): any; // return view; + insertViews(views:any): Layout; // return this; + + remove(): Layout; + removeView(fn:any): Layout; + + render(): Layout; // return this + renderViews(): Layout; // return this + setView(name: any, view: U, insert?:boolean): U; // return view + setViews(views:any): Layout; // return this + then(fn:()=>void):void; + + static cache(path: string, contents?: any): any; + static cleanViews(views: any): void; + static configure(options: LayoutManagerOptions): void; + static setupView(views: any, options?: LayoutOptions): void; + } +} +