From 33c1eb08b08a3cd221f84d16a7696b45df1a0f19 Mon Sep 17 00:00:00 2001 From: Peter Palotas Date: Sun, 28 Dec 2014 12:39:52 +0100 Subject: [PATCH 01/20] Updated marionette.js to comply with version 2.3.0. closeXXX() functions were renamed to destroyXXX() in version 2.0 of marionette, the same time that Layout was renamed to LayoutView which was already incorporated in these definitions. --- marionette/marionette.d.ts | 26 ++++++++++++++------------ 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/marionette/marionette.d.ts b/marionette/marionette.d.ts index 730ba4880b..91b9f98598 100644 --- a/marionette/marionette.d.ts +++ b/marionette/marionette.d.ts @@ -138,7 +138,7 @@ declare module Marionette { } class Controller extends Backbone.Events { - close(); + destroy(); } class Region extends Backbone.Events { @@ -150,9 +150,12 @@ declare module Marionette { show(view: Backbone.View): void; ensureEl(): void; open(view: Backbone.View): void; - close(): void; + destroy(): void; attachView(view: Backbone.View); reset(); + hasView(): boolean; + empty(); + } class RegionManager extends Controller { @@ -161,8 +164,8 @@ declare module Marionette { get(name: string): Region; removeRegion(name): void; removeRegions(): void; - closeRegions(): void; - close(); + emptyRegions(): void; + destroy(); //mixins from Collection (copied from Backbone's Collection declaration) @@ -221,7 +224,7 @@ declare module Marionette { delegateEvents(events?: any): any; undelegateEvents(); - close(); + destroy(); bindUIElements(); unbindUIElements(); @@ -235,8 +238,7 @@ declare module Marionette { ui(): any; serializeData(): any; - render(): ItemView; - close(); + render(): ItemView; } class CollectionView extends View { @@ -260,13 +262,13 @@ declare module Marionette { buildItemView(item: any, ItemViewType: any, itemViewOptions: any): any; removeItemView(item: any); removeChildView(view: View); - + isEmpty(): boolean; checkEmpty(); appendHtml(collectionView: View, itemView: View, index: Number); - close(); - closeChildren(); + destroy(); + destroyChildren(); } class CompositeView extends CollectionView { @@ -290,7 +292,7 @@ declare module Marionette { render(): LayoutView; removeRegion(name: string); } - + interface AppRouterOptions extends Backbone.RouterOptions { appRoutes: any; controller: any; @@ -316,7 +318,7 @@ declare module Marionette { addInitializer(initializer); start(options?); addRegions(regions); - closeRegions(): void; + emptyRegions(): void; removeRegion(region: Region); getRegion(regionName: string): Region; module(moduleNames, moduleDefinition); From 481f28c9f30d2e22ce5903878c99fdf1f6971acc Mon Sep 17 00:00:00 2001 From: Peter Palotas Date: Sun, 28 Dec 2014 13:38:05 +0100 Subject: [PATCH 02/20] Removed superfluous generics from class declarations. The Application, Region, Module and RegionManager classes were all declared as generic with a Model as a type-argument. However, none of these classes store items of a single model and do not need to be generic. The views are really the only classes that needs generics, so moved the generic to the methods accepting views as arguments instead. --- marionette/marionette.d.ts | 66 +++++++++++++++++++------------------- 1 file changed, 33 insertions(+), 33 deletions(-) diff --git a/marionette/marionette.d.ts b/marionette/marionette.d.ts index 730ba4880b..fcbdb9f5e5 100644 --- a/marionette/marionette.d.ts +++ b/marionette/marionette.d.ts @@ -141,24 +141,24 @@ declare module Marionette { close(); } - class Region extends Backbone.Events { + class Region extends Backbone.Events { - static buildRegion(regionConfig, defaultRegionType): Region; + static buildRegion(regionConfig, defaultRegionType): Region; el: any; - show(view: Backbone.View): void; + show(view: Backbone.View): void; ensureEl(): void; - open(view: Backbone.View): void; + open(view: Backbone.View): void; close(): void; - attachView(view: Backbone.View); + attachView(view: Backbone.View); reset(); } - class RegionManager extends Controller { + class RegionManager extends Controller { addRegions(regionDefinitions, defaults?): any; - addRegion(name, definition): Region; - get(name: string): Region; + addRegion(name, definition): Region; + get(name: string): Region; removeRegion(name): void; removeRegions(): void; closeRegions(): void; @@ -166,33 +166,33 @@ declare module Marionette { //mixins from Collection (copied from Backbone's Collection declaration) - all(iterator: (element: Region, index: number) => boolean, context?: any): boolean; - any(iterator: (element: Region, index: number) => boolean, context?: any): boolean; + all(iterator: (element: Region, index: number) => boolean, context?: any): boolean; + any(iterator: (element: Region, index: number) => boolean, context?: any): boolean; contains(value: any): boolean; detect(iterator: (item: any) => boolean, context?: any): any; - each(iterator: (element: Region, index: number, list?: any) => void , context?: any); - every(iterator: (element: Region, index: number) => boolean, context?: any): boolean; - filter(iterator: (element: Region, index: number) => boolean, context?: any): Region[]; - find(iterator: (element: Region, index: number) => boolean, context?: any): Region; - first(): Region; - forEach(iterator: (element: Region, index: number, list?: any) => void , context?: any); + each(iterator: (element: Region, index: number, list?: any) => void , context?: any); + every(iterator: (element: Region, index: number) => boolean, context?: any): boolean; + filter(iterator: (element: Region, index: number) => boolean, context?: any): Region[]; + find(iterator: (element: Region, index: number) => boolean, context?: any): Region; + first(): Region; + forEach(iterator: (element: Region, index: number, list?: any) => void , context?: any); include(value: any): boolean; - initial(): Region; - initial(n: number): Region[]; + initial(): Region; + initial(n: number): Region[]; invoke(methodName: string, arguments?: any[]); isEmpty(object: any): boolean; - last(): Region; - last(n: number): Region[]; - lastIndexOf(element: Region, fromIndex?: number): number; - map(iterator: (element: Region, index: number, context?: any) => any[], context?: any): any[]; + last(): Region; + last(n: number): Region[]; + lastIndexOf(element: Region, fromIndex?: number): number; + map(iterator: (element: Region, index: number, context?: any) => any[], context?: any): any[]; pluck(attribute: string): any[]; - reject(iterator: (element: Region, index: number) => boolean, context?: any): Region[]; - rest(): Region; - rest(n: number): Region[]; + reject(iterator: (element: Region, index: number) => boolean, context?: any): Region[]; + rest(): Region; + rest(n: number): Region[]; select(iterator: any, context?: any): any[]; - some(iterator: (element: Region, index: number) => boolean, context?: any): boolean; + some(iterator: (element: Region, index: number) => boolean, context?: any): boolean; toArray(): any[]; - without(...values: any[]): Region[]; + without(...values: any[]): Region[]; } class TemplateCache { @@ -285,7 +285,7 @@ declare module Marionette { constructor(options?: any); - addRegion(name: string, definition: any): Region; + addRegion(name: string, definition: any): Region; addRegions(regions: any): any; render(): LayoutView; removeRegion(name: string); @@ -304,7 +304,7 @@ declare module Marionette { } - class Application extends Backbone.Events { + class Application extends Backbone.Events { vent: Backbone.Wreqr.EventAggregator; commands: Backbone.Wreqr.Commands; @@ -317,15 +317,15 @@ declare module Marionette { start(options?); addRegions(regions); closeRegions(): void; - removeRegion(region: Region); - getRegion(regionName: string): Region; + removeRegion(region: Region); + getRegion(regionName: string): Region; module(moduleNames, moduleDefinition); } // modules mapped for convenience, but you should probably use TypeScript modules instead - class Module extends Backbone.Events { + class Module extends Backbone.Events { - constructor(moduleName: string, app: Application); + constructor(moduleName: string, app: Application); submodules: any; triggerMethod(name, ...args: any[]): any; From 945a61bd2138870e6fa1804eff749b106fd7eb77 Mon Sep 17 00:00:00 2001 From: Peter Palotas Date: Sun, 28 Dec 2014 19:32:20 +0100 Subject: [PATCH 03/20] - Added documentation to Marionette.RegionManager. - Added constructor with options to Marionette.RegionManager. - Added overloads to addRegions with more specific types. - Specified type of parameter for RegionManager.removeRegion. --- marionette/marionette.d.ts | 281 +++++++++++++++++++++++++++++++++---- 1 file changed, 252 insertions(+), 29 deletions(-) diff --git a/marionette/marionette.d.ts b/marionette/marionette.d.ts index 954acaf3b7..ab92482dd9 100644 --- a/marionette/marionette.d.ts +++ b/marionette/marionette.d.ts @@ -132,45 +132,274 @@ declare module Marionette { function unbindEntityEvents(target, entity, bindings); class Callbacks { - add(callback:Function, contextOverride:any): void; - run(options:any, context:any): void; + add(callback: Function, contextOverride: any): void; + run(options: any, context: any): void; reset(): void; } - class Controller extends Backbone.Events { - destroy(); + /** + * A base class which other classes can extend from. Object incorporates many + * backbone conventions and utilities like initialize and Backbone.Events. + */ + class Object extends Backbone.Events { + /** + * Initialize is called immediately after the Object has been instantiated, + * and is invoked with the same arguments that the constructor received. + */ + initialize(options?: any); + + /** + * Retrieve an object's attribute either directly from the object, or from + * the object's this.options, with this.options taking precedence. + * @param optionName the name of the option to retrieve. + */ + getOption(optionName: string): any; + + /** + * Objects have a destroy method that unbind the events that are directly + * attached to the instance. Invoking the destroy method will trigger a + * "before:destroy" event and corresponding onBeforeDestroy method call. + * These calls will be passed any arguments destroy was invoked with. + * @param args any arguments to pass to the "before:destory" event and call to + * onBeforeDestroy. + */ + destroy(...args: any[]): void; } - class Region extends Backbone.Events { + /** + * A Controller is an object used in the Marionette Router. Controllers are + * where you store your Router's callbacks. + */ + class Controller extends Backbone.Events { + /** + * @param options Options that should be stored in this options. Can be retreived via + * getOption. + */ + constructor(options?: any); - static buildRegion(regionConfig, defaultRegionType): Region; + /** + * Handles unbinding all of the events that are directly attached to the + * controller instance, as well as those that are bound using the + * EventBinder from the controller. + * + * Invoking the destroy method will trigger the "before:destroy" and + * "destroy" events and the corresponding onBeforeDestory and onDestroy + * method calls. These calls will be passed any arguments destroy was + * invoked with. + */ + destroy(...args: any[]): void; + /** + * Retrieve an object's attribute either directly from the object, or from + * the object's this.options, with this.options taking precedence. + * @param optionName the name of the option to retrieve. + */ + getOption(optionName: string): any; + } + + interface RegionConstructionOptions { + /** + * Specifies the element for the region to manage. This may be + * a selector string, a raw DOM node reference or a jQuery wrapped + * DOM node. + */ + el?: any; + } + + interface RegionShowOptions { + /** + * If you replace the current view with a new view by calling show, by + * default it will automatically destroy the previous view. You can + * prevent this behavior by setting this option to true. + */ + preventDestroy?: boolean; + + /** + * If you re-call show with the same view, by default nothing will happen + * because the view is already in the region. You can force the view to be + * re-shown by setting this option to true. + */ + forceShow?: boolean; + + /** + * Regions that are attached to the document when you execute show are + * special in that the views that they show will also become attached + * to the document. These regions fire a pair of triggerMethods on all + * of the views that are about to be attached – even the nested ones. + * This can cause a performance issue if you're rendering hundreds or + * thousands of views at once. + * If you think these events might be causing some lag in your app, you + * can selectively turn them off with the triggerBeforeAttach + * and triggerAttach properties. + */ + triggerBeforeAttach?: boolean; + + /** + * Regions that are attached to the document when you execute show are + * special in that the views that they show will also become attached + * to the document. These regions fire a pair of triggerMethods on all + * of the views that are about to be attached – even the nested ones. + * This can cause a performance issue if you're rendering hundreds or + * thousands of views at once. + * If you think these events might be causing some lag in your app, you + * can selectively turn them off with the triggerBeforeAttach + * and triggerAttach properties. + */ + triggerAttach?: boolean; + } + + /** + * Regions provide consistent methods to manage, show and destroy views in + * your applications and layouts. They use a jQuery selector to show your + * views in the correct place. + */ + class Region extends Marionette.Object { + + /** + * Build an instance of a region by passing in a configuration object and + * a default region class to use if none is specified in the config. + * The config object should either be a string as a jQuery DOM selector, + * a Region class directly, or an object literal that specifies a selector, + * a custom regionClass, and any options to be supplied to the region + */ + static buildRegion(regionConfig: any, defaultRegionType: any): Region; + + /** + * You can specify an el for the region to manage at the time the region + * is instantiated. + */ + constructor(options?: RegionConstructionOptions); + + /** + * Contains the element that this region should manage. + */ el: any; - show(view: Backbone.View): void; - ensureEl(): void; -<<<<<<< HEAD - open(view: Backbone.View): void; - destroy(): void; - attachView(view: Backbone.View); -======= - open(view: Backbone.View): void; - close(): void; - attachView(view: Backbone.View); ->>>>>>> marionette.superfluous.generics.removed - reset(); + /** + * Renders and displays the specified view in this region. + * @param view the view to display. + */ + show(view: Backbone.View, options?: RegionShowOptions): void; + + /** + * Attaches an existing view to a region, without rendering or showing the view, + * and without replacing the HTML content of the region. + */ + attachView(view: Backbone.View, options?: RegionShowOptions): any; + + /** + * A region can be reset at any time. This destroys any existing view + * being displayed, and deletes the cached el. The next time the region + * shows a view, the region's el is queried from the DOM. + */ + reset(): any; + + /** + * If you wish to check whether a region has a view, you can use the hasView function. This will return a boolean value depending whether or not the region is showing a view. + */ hasView(): boolean; - empty(); + + /** + * Empties the current view from the region. + */ + empty(): any; } + interface RegionDefaults { + /** + * A selector string indicating which element to assign the region two. + */ + selector?: string; + + /** + * A selector string, a jQuery object, or an HTML node indicating which element + * the region should use. + */ + el?: any; + + /** + * A custom region class. + */ + regionClass?: any; + + /** + * Ordinarily regions enforce the presence of a backing DOM element. In + * some instances it may be desirable to allow regions to be instantiated + * and used without an element, such as when regions defined by a parent + * LayoutView class are used by only some of its subclasses. In these + * instances, the region can be defined with this option set to true, + * suppressing the missing element error and causing show calls to the + * region to be treated as no-ops. + */ + allowMissingEl?: boolean; + } + + /** + * Region managers provide a consistent way to manage a number of Marionette.Region + * objects within an application. The RegionManager is intended to be used by + * other objects, to facilitate the addition, storage, retrieval, and removal of + * regions from that object. + */ class RegionManager extends Controller { - addRegions(regionDefinitions, defaults?): any; - addRegion(name, definition): Region; + + /** + * Constructor. + * @param options May contain an optional `regions` option. These regions + * are passed directly into addRegions for this instance. + */ + constructor(options?: any); + + /** + * Adds one or more regions to this RegionManager instance. + * @param regionDefinitions a function returning an object literal with the region definitions. The function will + * be called with the RegionManager instance context and all the arguments passed to addRegions. + * @param defaults Specifies default options that will be applied to every region added. + * @returns an object literal with all the created regions. + */ + addRegions(regionDefinitions: Function, defaults?: RegionDefaults): any; + + /** + * Adds one or more regions to this RegionManager instance. + * @param regionDefinitions an object literal containing region names as keys and region + * definitions as values. + * @param defaults Specifies default options that will be applied to every region added. + * @returns an object literal with all the created regions. + */ + addRegions(regionDefinitions: { [regionName: string]: any }, defaults?: RegionDefaults): any; + + /** + * Adds a region to this RegionManager. + * @param name the region name. + * @param definition the region definition. This may be a selector, object literal + * with various region creation options or an instance of a region object. + */ + addRegion(name: string, definition: any): Region; + + /** + * Gets the region with the specified name from this RegionManager. + */ get(name: string): Region; - removeRegion(name): void; + + /** + * Removes the region with the specified name from this RegionManager. + */ + removeRegion(name: string): void; + + /** + * Removes all regions from the RegionManager. + */ removeRegions(): void; - emptyRegions(): void; + + /** + * Empties all regions from the RegionManager instance. + */ + emptyRegions(): void; + + /** + * Destroys the RegionManager instance entierly which both destroys and + * removes all regions from the RegionManager instance. + */ destroy(); //mixins from Collection (copied from Backbone's Collection declaration) @@ -324,15 +553,9 @@ declare module Marionette { addInitializer(initializer); start(options?); addRegions(regions); -<<<<<<< HEAD emptyRegions(): void; - removeRegion(region: Region); - getRegion(regionName: string): Region; -======= - closeRegions(): void; removeRegion(region: Region); getRegion(regionName: string): Region; ->>>>>>> marionette.superfluous.generics.removed module(moduleNames, moduleDefinition); } From c8286571640a9a0266eb8fd816650d2f23752222 Mon Sep 17 00:00:00 2001 From: Peter Palotas Date: Sun, 28 Dec 2014 19:51:07 +0100 Subject: [PATCH 04/20] Added documentation to underscore mixins of RegionManager, and fixed some errors in the definitions there. --- marionette/marionette.d.ts | 143 +++++++++++++++++++++++++++++++++++-- 1 file changed, 137 insertions(+), 6 deletions(-) diff --git a/marionette/marionette.d.ts b/marionette/marionette.d.ts index ab92482dd9..e12a553b97 100644 --- a/marionette/marionette.d.ts +++ b/marionette/marionette.d.ts @@ -404,32 +404,163 @@ declare module Marionette { //mixins from Collection (copied from Backbone's Collection declaration) + /** + * Returns true if all of the values in the list pass the predicate truth test. + * @alias every + */ all(iterator: (element: Region, index: number) => boolean, context?: any): boolean; + + /** + * Returns true if any of the values in the list pass the predicate truth test. Short-circuits and stops traversing the list if a true element is found. + */ any(iterator: (element: Region, index: number) => boolean, context?: any): boolean; + + /** + * Returns true if the value is present in the list. + * @alias include + */ contains(value: any): boolean; + + /** + * Looks through each value in the list, returning the first one that passes a truth test (predicate), or undefined if no value passes the test.The function returns as soon as it finds an acceptable element, and doesn't traverse the entire list. + * @alias find + */ detect(iterator: (item: any) => boolean, context?: any): any; - each(iterator: (element: Region, index: number, list?: any) => void , context?: any); + + /** + * Iterates over the regions in this instance, yielding each in turn to an + * iterator function. The iterator is bound to the context object, if one + * is passed. + * @alias forEach + */ + each(iterator: (element: Region, index: number, list?: any) => void, context?: any); + + /** + * Returns true if all of the values in the list pass the predicate truth test. + * @alias all + */ every(iterator: (element: Region, index: number) => boolean, context?: any): boolean; + + /** + * Looks through each Region in the collection, returning an array of all + * the values that pass a truth test (predicate). + * @alias select + */ filter(iterator: (element: Region, index: number) => boolean, context?: any): Region[]; + + /** + * Looks through each Region in this instance, returning the first one that passes a truth test (predicate), or undefined if no value passes the test.The function returns as soon as it finds an acceptable element, and doesn't traverse the entire list. + * @alias detect + */ find(iterator: (element: Region, index: number) => boolean, context?: any): Region; + + /** + * Returns the first Region of this RegionManager. + */ first(): Region; - forEach(iterator: (element: Region, index: number, list?: any) => void , context?: any); + + /** + * Returns the first n Regions of this RegionManager. + */ + first(n: number): Region[]; + + /** + * Iterates over the regions in this instance, yielding each in turn to an + * iterator function. The iterator is bound to the context object, if one + * is passed. + * @alias each + */ + forEach(iterator: (element: Region, index: number, list?: any) => void, context?: any); + + /** + * Returns true if the value is present in the list. + * @alias contains + */ include(value: any): boolean; - initial(): Region; + + /** + * Returns everything but the last n Regions of this instance. + * @param n if specified determines the number of regions to exclude, + * otherwise only the last element is excluded. + */ initial(n: number): Region[]; + + /** + * Calls the method named by methodName on each value in the collection. Any extra + * arguments passed to invoke will be forwarded on to the method invocation. + */ invoke(methodName: string, arguments?: any[]); + + /** + * Returns true if the RegionManager contains no regions. + */ isEmpty(object: any): boolean; + + /** + * Returns the last element of a collection. + */ last(): Region; + + /** + * Returns the last n elements of the collection. + */ last(n: number): Region[]; + + /** + * Returns the index of the last occurrence of element in the collection, or -1 if + * element is not present. + * @param fromIndex if specified starts the search at the given index. + */ lastIndexOf(element: Region, fromIndex?: number): number; + + /** + * Produces a new array of values by mapping each value in the collection through a + * transformation function (iterator). + * @alias collect + */ map(iterator: (element: Region, index: number, context?: any) => any[], context?: any): any[]; + + /** + * Pluck an attribute from each model in the collection. Equivalent to + * calling map and returning a single attribute from the iterator. + */ pluck(attribute: string): any[]; + + /** + * Returns the values in the collection without the elements that the truth test + * (predicate) passes. The opposite of filter. + */ reject(iterator: (element: Region, index: number) => boolean, context?: any): Region[]; - rest(): Region; + + /** + * Returns the rest of the elements of the collection. + * Pass an index to return the values of the array from that index onward. If not + * specified the first item in the collection is dropped. + * @alias tail, drop + */ rest(n: number): Region[]; - select(iterator: any, context?: any): any[]; + + /** + * Looks through each value in the collection, returning an array of all + * the values that pass a truth test (predicate). + * @alias filter + */ + select(iterator: any, context?: any): Region[]; + + /** + * Returns true if any of the values in the list pass the predicate truth test. Short-circuits and stops traversing the list if a true element is found. + * @alias any + */ some(iterator: (element: Region, index: number) => boolean, context?: any): boolean; - toArray(): any[]; + + /** + * Creates an array containing the regions in this instance. + */ + toArray(): Region[]; + + /** + * Returns an array of all the regions in the RegionManager except the ones specified. + */ without(...values: any[]): Region[]; } From 988df7b7f4685d24359db8cfdc9542fb29e6c53c Mon Sep 17 00:00:00 2001 From: Peter Palotas Date: Sun, 28 Dec 2014 19:58:37 +0100 Subject: [PATCH 05/20] - Added documentation to Marionette.TemplateCache. Added strong types for parameters and return types of this class. --- marionette/marionette.d.ts | 35 +++++++++++++++++++++++++++++++---- 1 file changed, 31 insertions(+), 4 deletions(-) diff --git a/marionette/marionette.d.ts b/marionette/marionette.d.ts index e12a553b97..6479f0f388 100644 --- a/marionette/marionette.d.ts +++ b/marionette/marionette.d.ts @@ -564,12 +564,39 @@ declare module Marionette { without(...values: any[]): Region[]; } + /** + * The TemplateCache provides a cache for retrieving templates from script blocks + * in your HTML. This will improve the speed of subsequent calls to get a template. + */ class TemplateCache { - static get (templateId): any; - static clear(): void; + /** + * To use the TemplateCache, call the get method on TemplateCache directly. Internally, instances of the TemplateCache class will be created and stored but you do not have to manually create these instances yourself. get will return a compiled template function. + */ + static get(templateId: string): any; - loadTemplate(templateId): any; - compileTemplate(rawTemplate): any; + /** + * You can clear one or more, or all items from the cache using the clear + * method. Clearing a template from the cache will force it to re-load + * from the DOM the next time it is retrieved. + * @param the templateId used for loading / caching of the templates to clear. If none specified, all templates will be cleared from the cache. + */ + static clear(...templateId: string[]): void; + + /** + * The default template retrieval is to select the template contents from the + * DOM using jQuery. If you wish to change the way this works, you can + * override this method on the TemplateCache object. + */ + loadTemplate(templateId: string): any; + + /** + * he default template compilation passes the results from loadTemplate to + * the compileTemplate function, which returns an underscore.js compiled + * template function. When overriding compileTemplate remember that it + * must return a function which takes an object of parameters and values + * and returns a formatted HTML string. + */ + compileTemplate(rawTemplate: any): any; } class Renderer { From 8c57d70d06ca83a6ce12844eedc8c2b6827203f6 Mon Sep 17 00:00:00 2001 From: Peter Palotas Date: Sun, 28 Dec 2014 20:01:48 +0100 Subject: [PATCH 06/20] - Added documentation to Marionette.Renderer --- marionette/marionette.d.ts | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/marionette/marionette.d.ts b/marionette/marionette.d.ts index 6479f0f388..af31710abe 100644 --- a/marionette/marionette.d.ts +++ b/marionette/marionette.d.ts @@ -599,8 +599,24 @@ declare module Marionette { compileTemplate(rawTemplate: any): any; } + /** + * The Renderer object was extracted from the ItemView rendering process, in + * order to create a consistent and re-usable method of rendering a template + * with or without data. + */ class Renderer { - static render(template, data): void; + /** + * This method returns a string containing the result of applying the + * template using the data object as the context. + * @param template The template to render. If this is a function this is + * treated as a pre-compiled template and does not try to compile it again. This + * allows any view that supports a template parameter to specify a pre-compiled + * template function as the template setting. The template function does not + * have to be any specific template engine. It only needs to be a function + * that returns valid HTML as a string from the data parameter passed to + * the function. + */ + static render(template: any, data: any): string; } class View extends Backbone.View { From 245a2440d7598690038e2b778758426304a136bc Mon Sep 17 00:00:00 2001 From: Peter Palotas Date: Sun, 28 Dec 2014 20:17:14 +0100 Subject: [PATCH 07/20] - Added documentation for the Marionette.View class. Added some stronger typing to a couple of methods. --- marionette/marionette.d.ts | 64 +++++++++++++++++++++++++++++++++++--- 1 file changed, 60 insertions(+), 4 deletions(-) diff --git a/marionette/marionette.d.ts b/marionette/marionette.d.ts index af31710abe..169befb18d 100644 --- a/marionette/marionette.d.ts +++ b/marionette/marionette.d.ts @@ -619,22 +619,78 @@ declare module Marionette { static render(template: any, data: any): string; } + /** + * This base view provides some common and core functionality for other views + * to take advantage of. + * Note: The Marionette.View class is not intended to be used directly. It + * exists as a base view for other view classes to be extended from, and to + * provide a common location for behaviors that are shared across all views. + */ class View extends Backbone.View { - constructor(options?: any); + constructor(options?: Backbone.ViewOptions); + /** + * A configuration hash for models. The left side is the event on + * the model, and the right side is the name of the + * method on the view or a function to handle the event. This property + * can also be a function that returns the hash described above. + */ modelEvents: any; + + /** + * A configuration hash for collections. The left side is the event on + * the collection, and the right side is the name of the + * method on the view or a function to handle the event. This property + * can also be a function that returns the hash described above. + */ collectionEvents: any; + + /** + * In several cases you need to access ui elements inside the view to + * retrieve their data or manipulate them. For example you have a certain + * div element you need to show/hide based on some state, or other ui + * element that you wish to set a css class to it. Instead of having + * jQuery selectors hanging around in the view's code you can define a + * ui hash that contains a mapping between the ui element's name and its + * jQuery selector. Afterwards you can simply access it via + * this.ui.elementName. + */ ui(): any; + /** + * There may be some cases where you need to change the template that is + * used for a view, based on some simple logic such as the value of a + * specific attribute in the view's model. To do this, you can provide a + * getTemplate function on your views and use this to return the template + * that you need. + */ getTemplate(): any; + + mixinTemplateHelpers(target?: any): any; configureTriggers(): any; - delegateEvents(events?: any): any; - undelegateEvents(); - destroy(); + /** + * View implements a destroy method, which is called by the region managers automatically. As part of the implementation. + */ + destroy(...args: any[]): void; + + /** + * In several cases you need to access ui elements inside the view to + * retrieve their data or manipulate them. For example you have a certain + * div element you need to show/hide based on some state, or other ui + * element that you wish to set a css class to it. Instead of having jQuery + * selectors hanging around in the view's code you can define a ui hash + * that contains a mapping between the ui element's name and its jQuery + * selector. Afterwards you can simply access it via this.ui.elementName. + * This functionality is provided via the bindUIElements method. + * Since View doesn't implement the render method, then if you directly + * extend from View you will need to invoke this method from your render + * method. In ItemView and CompositeView this is already taken care of. + */ bindUIElements(); + unbindUIElements(); triggerMethod(name, ...args: any[]): any; From 34d86d59e6870782c47361300483de38c6b80a1a Mon Sep 17 00:00:00 2001 From: Peter Palotas Date: Sun, 28 Dec 2014 20:28:40 +0100 Subject: [PATCH 08/20] - Added documentation to ItemView. - Added onXXX declarations and documentation to View and ItemView. --- marionette/marionette.d.ts | 76 ++++++++++++++++++++++++++++++++++++-- 1 file changed, 73 insertions(+), 3 deletions(-) diff --git a/marionette/marionette.d.ts b/marionette/marionette.d.ts index 169befb18d..1a832dcde1 100644 --- a/marionette/marionette.d.ts +++ b/marionette/marionette.d.ts @@ -694,16 +694,86 @@ declare module Marionette { unbindUIElements(); triggerMethod(name, ...args: any[]): any; + + /** + * Called on the view instance when the view has been rendered and + * displayed. This event can be used to react to when a view has been + * shown via a region. A common use case for the onShow method is to + * use it to add children views. + */ + onShow(); + + /** + * Triggered just after the view has been destroyed. + */ + onDestroy(); + + /** + * When destroying a view, an onBeforeDestroy method will be called, if + * it has been provided, just before the view destroys. It will be passed + * any arguments that destroy was invoked with. + */ + onBeforeDestroy(...args: any[]); + + /** + * Called anytime that showing the view in a Region causes it to be + * attached to the document. + */ + onAttach(); + + /** + * Triggered right before the view is attached to the document. + */ + onBeforeAttach(); + + /** + * Triggered after the view has been rendered, has been shown in the DOM via a Marionette.Region, and has been re-rendered. + * This event / callback is useful for DOM-dependent UI plugins such as jQueryUI or KendoUI. + */ + onDomRefresh(); } + /** + * An ItemView is a view that represents a single item. That item may be + * a Backbone.Model or may be a Backbone.Collection. Whichever it is though, + * it will be treated as a single item. + */ class ItemView extends View { constructor(options?: any); - ui(): any; - + /** + * Item views will serialize a model or collection, by default, by calling + * .toJSON on either the model or collection. If both a model and + * collection are attached to an item view, the model will be used as the + * data source. The results of the data serialization will be passed to + * the template that is rendered. + * + * If you need custom serialization for your data, you can provide a serializeData + * method on your view. It must return a valid JSON object, as if you had + * called .toJSON on a model or collection. + */ serializeData(): any; - render(): ItemView; + + /** + * Renders the view. It is unwise to override the render method of any + * Marionette view. Instead, you should use the onBeforeRender and + * onRender callbacks to layer in additional functionality to the + * rendering of your view. + */ + render(): ItemView; + + /** + * Triggered before an ItemView is rendered. + */ + onBeforeRender(); + + /** + * Triggered after the view has been rendered. You can implement this in + * your view to provide custom code for dealing with the view's el after + * it has been rendered. + */ + onRender(); } class CollectionView extends View { From 6df70bcd91e937c32fe48168bff944d73e981014 Mon Sep 17 00:00:00 2001 From: Peter Palotas Date: Sun, 28 Dec 2014 20:58:29 +0100 Subject: [PATCH 09/20] - Added documentation to Marionette.CollectionView. - Fixed many errors in the definition so that it now conforms to version 2.3.0 of Marionette. --- marionette/marionette.d.ts | 216 +++++++++++++++++++++++++++++++++---- 1 file changed, 196 insertions(+), 20 deletions(-) diff --git a/marionette/marionette.d.ts b/marionette/marionette.d.ts index 1a832dcde1..196571e7a9 100644 --- a/marionette/marionette.d.ts +++ b/marionette/marionette.d.ts @@ -740,7 +740,7 @@ declare module Marionette { */ class ItemView extends View { - constructor(options?: any); + constructor(options?: Backbone.ViewOptions); /** * Item views will serialize a model or collection, by default, by calling @@ -776,34 +776,210 @@ declare module Marionette { onRender(); } + + interface CollectionViewOptions extends Backbone.ViewOptions { + + /** + * By default the CollectionView will maintain a sorted collection's order + * in the DOM. This behavior can be disabled by specifying {sort: false} + * on initialize. + */ + sort?: boolean; + } + + /** + * The CollectionView will loop through all of the models in the specified + * collection, render each of them using a specified childView, then append + * the results of the child view's el to the collection view's el. By + * default the CollectionView will maintain a sorted collection's order in the + * DOM. This behavior can be disabled by specifying {sort: false} on + * initialize. + */ class CollectionView extends View { - constructor(options?: any); + constructor(options?: CollectionViewOptions); - itemView: any; - children: any; + /** + * Specify a childView in your collection view definition. This must be a + * Backbone view object definition, not an instance. It can be any + * Backbone.View or be derived from Marionette.ItemView + */ + childView: any; - //_initialEvents(); - addChildView(item: View, collection: View, options?: any); - onShowCalled(); + /** + * There may be scenarios where you need to pass data from your parent + * collection view in to each of the childView instances. To do this, + * provide a childViewOptions definition on your collection view as an + * object literal. This will be passed to the constructor of your childView + * as part of the options. + * + * You can also specify the childViewOptions as a function, if you need to + * calculate the values to return at runtime. The model will be passed + * into the function should you need access to it when calculating + * childViewOptions. The function must return an object, and the attributes of + * the object will be copied to the childView instance's options. + */ + childViewOptions: any; - triggerBeforeRender(); - triggerRendered(); + /** + * You can customize the event prefix for events that are forwarded through + * the collection view. To do this, set the childViewEventPrefix on the + * collection view. + */ + childViewEventPrefix: string; + + /** + * You can specify a childEvents hash or method which allows you to + * capture all bubbling childEvents without having to manually set bindings. + * The keys of the hash can either be a function or a string that is the + * name of a method on the collection view. + */ + childViewEvents: any; + + /** + * When a collection has no children, and you need to render a view other than + * the list of childViews, you can specify an emptyView attribute on your collection + * view. + */ + emptyView: any; + + /** + * Similar to childView and childViewOptions, there is an emptyViewOptions + * property that will be passed to the emptyView constructor. It can be + * provided as an object literal or as a function. If emptyViewOptions + * aren't provided the CollectionView will default to passing the + * childViewOptions to the emptyView. + */ + emptyViewOptions: any; + + /** + * The CollectionView uses Backbone.BabySitter to store and manage its + * child views. This allows you to easily access the views within the + * collection view, iterate them, find them by a given indexer such as the + * view's model or collection, and more. + */ + children: Backbone.ChildViewContainer; + + /** + * The render method of the collection view is responsible for rendering the + * entire collection. It loops through each of the children in the collection + * and renders them individually as an childView. + */ render(): CollectionView; + + /** + * The addChild method is responsible for rendering the childViews and + * adding them to the HTML for the collectionView instance. It is also + * responsible for triggering the events per ChildView. In most cases you + * should not override this method. + */ + addChild(item: any, ChildView: Backbone.View, index: Number): void; - getItemView(item: any): ItemView; - addItemView(item: any, ItemView: ItemView, index: Number); - addChildViewEventForwarding(view: View); - renderItemView(view: View, index: Number); - buildItemView(item: any, ItemViewType: any, itemViewOptions: any): any; - removeItemView(item: any); - removeChildView(view: View); + renderChildView(view: Backbone.View, index: Number); + + /** + * When a custom view instance needs to be created for the childView that + * represents a child, override the buildChildView method. This method + * takes three parameters and returns a view instance to be used as the + * child view. + */ + buildChildView(child: any, ItemViewType: any, itemViewOptions: any): View; + + /** + * Remove the child view and destroy it. This function also updates the indices of + * later views in the collection in order to keep the children in sync with the collection. + */ + removeChildView(view: any); + + /** + * Determines if the view is empty. If you want to control when the empty + * view is rendered, you can override isEmpty. + */ isEmpty(): boolean; - checkEmpty(); - appendHtml(collectionView: View, itemView: View, index: Number); + /** + * If empty, show the empty view + */ + checkEmpty(): void; + + destroyChildren(): void; - destroy(); - destroyChildren(); + /** + * By default the CollectionView will maintain the order of its collection + * in the DOM. However on occasions the view may need to re-render to make + * this possible, for example if you were to change the comparator on the + * collection. By default CollectionView will call render when this happens, + * but there are cases where this may not be suitable. For instance when + * sorting the children in a CompositeView, you want to only render the + * internal collection. + */ + resortView(): void; + + /** + * By default the collection view will append the HTML of each ChildView + * into the element buffer, and then call jQuery's .append once at the end + * to move the HTML into the collection view's el. + * You can override this by specifying an attachHtml method in your view + * definition. + * @param collectionView the instance of the collection view that will receive the HTML. + * @param childView the current child view instance. + * @param index he index of the model that this childView instance represents, + * in the collection that the model came from. This is useful for sorting + * a collection and displaying the sorted list in the correct order on the + * screen. + */ + attachHtml(collectionView: CollectionView, childView: Backbone.View, index: number): void; + + /** + * The value returned by this method is the ChildView class that will be + * instantiated when a Model needs to be initially rendered. This method + * also gives you the ability to customize per Model ChildViews. + */ + getChildView(item: TModel): any; + + /** + * If you need the emptyView's class chosen dynamically, specify + * getEmptyView. + */ + getEmptyView(): any; + + /** + * Called just prior to rendering the collection view. + */ + onBeforeRender(): void; + + /** + * Triggered after the view has been rendered. You can implement this in + * your view to provide custom code for dealing with the view's el after + * it has been rendered. + */ + onRender(): void; + + /** + * This callback function allows you to know when a child / child view + * instance is about to be added to the collection view. It provides + * access to the view instance for the child that was added. + */ + onBeforeAddChild(view: any): void; + + /** + * This callback function allows you to know when a child / child view + * instance has been added to the collection view. It provides access to + * the view instance for the child that was added. + */ + onAddChild(childView: any): void; + + /** + * This callback function allows you to know when a childView instance is + * about to be removed from the collectionView. It provides access to the + * view instance for the child that was removed. + */ + onBeforeRemoveChild(childView: any): void; + + /** + * This callback function allows you to know when a child / childView + * instance has been deleted or removed from the collection. + */ + onRemoveChild(childView: any): void; } class CompositeView extends CollectionView { From b9f410e0242842caf2f87801659b50f5f2e68dbe Mon Sep 17 00:00:00 2001 From: Peter Palotas Date: Sun, 28 Dec 2014 21:05:30 +0100 Subject: [PATCH 10/20] - Added documentation to Marionette.CompositeView. - Added event callback definitions. - Updated for Marionette 2.3.0. --- marionette/marionette.d.ts | 51 +++++++++++++++++++++++++++++++++----- 1 file changed, 45 insertions(+), 6 deletions(-) diff --git a/marionette/marionette.d.ts b/marionette/marionette.d.ts index 196571e7a9..5d0875e218 100644 --- a/marionette/marionette.d.ts +++ b/marionette/marionette.d.ts @@ -982,16 +982,55 @@ declare module Marionette { onRemoveChild(childView: any): void; } + /** + * A CompositeView extends from CollectionView to be used as a composite view + * for scenarios where it should represent both a branch and leaf in a tree + * structure, or for scenarios where a collection needs to be rendered within + * a wrapper template. + */ class CompositeView extends CollectionView { - constructor(options?: any); + constructor(options?: CollectionViewOptions); - itemView: any; - itemViewContainer: string; + /** + * Each childView will be rendered using the childView's template. The + * CompositeView's template is rendered and the childView's templates are + * added to this. + */ + childView: any; - render(): CompositeView; - appendHtml(cv: any, iv: any); - renderModel(): any; + /** + * By default the composite view uses the same attachHtml method that the + * collection view provides. This means the view will call jQuery's + * .append to move the HTML contents from the child view instance in to + * the collection view's el. + * This is typically not very useful as a composite view will usually render + * a container DOM element in which the child views should be placed. + * This can be either a string or a function returning a string. + */ + childViewContainer: any; + + render(): CompositeView; + + /** + * Invoked before the model has been rendered + */ + onBeforeRenderTemplate(): void; + + /** + * Invoked after the model has been rendered. + */ + onRenderTemplate(): void; + + /** + * Invoked before the collection of models is rendered + */ + onBeforeRenderCollection(): void; + + /** + * Invoked after the collection of models has been rendered + */ + onRenderCollection(): void; } class LayoutView extends ItemView { From ad8e1cc5d6369082de77fd760a8f8d2974ad5422 Mon Sep 17 00:00:00 2001 From: Peter Palotas Date: Sun, 28 Dec 2014 22:24:56 +0100 Subject: [PATCH 11/20] Added documentation to Marionette.LayoutView. --- marionette/marionette.d.ts | 89 ++++++++++++++++++++++++++++---------- 1 file changed, 66 insertions(+), 23 deletions(-) diff --git a/marionette/marionette.d.ts b/marionette/marionette.d.ts index 5d0875e218..31b9cbe523 100644 --- a/marionette/marionette.d.ts +++ b/marionette/marionette.d.ts @@ -29,12 +29,12 @@ declare module Backbone { any(iterator: (element: View, index: number) => boolean, context?: any): boolean; contains(value: any): boolean; detect(iterator: (item: any) => boolean, context?: any): any; - each(iterator: (element: View, index: number, list?: any) => void , context?: any); + each(iterator: (element: View, index: number, list?: any) => void, context?: any); every(iterator: (element: View, index: number) => boolean, context?: any): boolean; filter(iterator: (element: View, index: number) => boolean, context?: any): View[]; find(iterator: (element: View, index: number) => boolean, context?: any): View; first(): View; - forEach(iterator: (element: View, index: number, list?: any) => void , context?: any); + forEach(iterator: (element: View, index: number, list?: any) => void, context?: any); include(value: any): boolean; initial(): View; initial(n: number): View[]; @@ -58,27 +58,27 @@ declare module Backbone { module Wreqr { module radio { - + function channel(channelName: string): Channel; } class Channel { - + constructor(channelName: string); - + vent: Backbone.Wreqr.EventAggregator; reqres: Backbone.Wreqr.RequestResponse; commands: Backbone.Wreqr.Commands; channelName: string; - + reset(): Channel; connectEvents(hash: string, context: any): Channel; connectCommands(hash: string, context: any): Channel; connectRequests(hash: string, context: any): Channel; } - + class Handlers extends Backbone.Events { constructor(options?: any); @@ -358,7 +358,7 @@ declare module Marionette { * @returns an object literal with all the created regions. */ addRegions(regionDefinitions: Function, defaults?: RegionDefaults): any; - + /** * Adds one or more regions to this RegionManager instance. * @param regionDefinitions an object literal containing region names as keys and region @@ -458,18 +458,18 @@ declare module Marionette { * Returns the first Region of this RegionManager. */ first(): Region; - + /** * Returns the first n Regions of this RegionManager. */ first(n: number): Region[]; - /** - * Iterates over the regions in this instance, yielding each in turn to an - * iterator function. The iterator is bound to the context object, if one - * is passed. - * @alias each - */ + /** + * Iterates over the regions in this instance, yielding each in turn to an + * iterator function. The iterator is bound to the context object, if one + * is passed. + * @alias each + */ forEach(iterator: (element: Region, index: number, list?: any) => void, context?: any); /** @@ -761,7 +761,7 @@ declare module Marionette { * onRender callbacks to layer in additional functionality to the * rendering of your view. */ - render(): ItemView; + render(): ItemView; /** * Triggered before an ItemView is rendered. @@ -865,7 +865,7 @@ declare module Marionette { * and renders them individually as an childView. */ render(): CollectionView; - + /** * The addChild method is responsible for rendering the childViews and * adding them to the HTML for the collectionView instance. It is also @@ -900,7 +900,7 @@ declare module Marionette { * If empty, show the empty view */ checkEmpty(): void; - + destroyChildren(): void; /** @@ -926,7 +926,7 @@ declare module Marionette { * in the collection that the model came from. This is useful for sorting * a collection and displaying the sorted list in the correct order on the * screen. - */ + */ attachHtml(collectionView: CollectionView, childView: Backbone.View, index: number): void; /** @@ -1010,7 +1010,10 @@ declare module Marionette { */ childViewContainer: any; - render(): CompositeView; + /** + * Renders the view. + */ + render(): CompositeView; /** * Invoked before the model has been rendered @@ -1033,14 +1036,54 @@ declare module Marionette { onRenderCollection(): void; } + /** + * A LayoutView is a hybrid of an ItemView and a collection of Region objects. + * They are ideal for rendering application layouts with multiple sub-regions + * managed by specified region managers. + * A layoutView can also act as a composite-view to aggregate multiple views + * and sub-application areas of the screen allowing applications to attach + * multiple region managers to dynamically rendered HTML. + * You can create complex views by nesting layoutView managers within Regions. + */ class LayoutView extends ItemView { + /** + * f you have the need to replace the Region with a region class of your + * own implementation, you can specify an alternate class to use with this + * property. + */ + regionClass: any; + /** + * Constructor. + * A hash that can contain a regions hash that allows you to specify regions per + * LayoutView instance. + */ constructor(options?: any); + /** Adds a region to the layout view. */ addRegion(name: string, definition: any): Region; + + /** + * Add multiple regions as a {name: definition, name2: def2} object literal. + */ addRegions(regions: any): any; + + /** + * Renders the view. + */ render(): LayoutView; - removeRegion(name: string); + + /** + * Removes the region with the specified name. + * @param name the name of the region to remove. + */ + removeRegion(name: string): any; + + /** Enable easy overriding of the default `RegionManager` + * for customized region interactions and business specific + * view logic for better control over single regions. + */ + getRegionManager(); } interface AppRouterOptions extends Backbone.RouterOptions { @@ -1052,8 +1095,8 @@ declare module Marionette { constructor(options?: AppRouterOptions); processAppRoutes(controller: any, appRoutes: any); - appRoute(route:string, methodName:string):void; - + appRoute(route: string, methodName: string): void; + } class Application extends Backbone.Events { From 2875e9f1b72a8ad8a14847e3a0667879fca8cb01 Mon Sep 17 00:00:00 2001 From: Peter Palotas Date: Sun, 28 Dec 2014 22:30:56 +0100 Subject: [PATCH 12/20] Added documentation to Marionette.AppRouter. Also made option keys optional since they are not mandatory. --- marionette/marionette.d.ts | 39 ++++++++++++++++++++++++++++++++++---- 1 file changed, 35 insertions(+), 4 deletions(-) diff --git a/marionette/marionette.d.ts b/marionette/marionette.d.ts index 31b9cbe523..d227ab6064 100644 --- a/marionette/marionette.d.ts +++ b/marionette/marionette.d.ts @@ -1087,16 +1087,47 @@ declare module Marionette { } interface AppRouterOptions extends Backbone.RouterOptions { - appRoutes: any; - controller: any; + /** + * The appRoutes. + */ + appRoutes?: any; + + /** + * The controller to associate with this router. + */ + controller?: any; } + /** + * Reduce the boilerplate code of handling route events and then calling a + * single method on another object. Have your routers configured to call + * the method on your object, directly. + */ class AppRouter extends Backbone.Router { + /** + * Configure an AppRouter with appRoutes. The route definition + * is passed on to Backbone's standard routing handlers. This means + * that you define routes like you normally would. However, instead of + * providing a callback method that exists on the router, you provide a + * callback method that exists on the controller, which you specify for + * the router instance (see below.) + */ constructor(options?: AppRouterOptions); - processAppRoutes(controller: any, appRoutes: any); - appRoute(route: string, methodName: string): void; + /** + * You can specify a controller with the multiple routes at runtime with + * this method. However, In this case the current controller of AppRouter + * will not change. + */ + processAppRoutes(controller: any, appRoutes: any); + + /** + * Adds an app route at runtime to this instance. It works the same as the + * built-in router.route() call from Backbone's Router, but has all the + * same semantics and behavior of the appRoutes configuration. + */ + appRoute(route: string, methodName: string): void; } class Application extends Backbone.Events { From 7b61a5d2f5194cc3818d91f54f659989e07c8bd4 Mon Sep 17 00:00:00 2001 From: Peter Palotas Date: Sun, 28 Dec 2014 22:46:00 +0100 Subject: [PATCH 13/20] Added documentation to Marionette.Application. Added documentation to Marionette functions. Added some typings. --- marionette/marionette.d.ts | 103 +++++++++++++++++++++++++++++++++++-- 1 file changed, 98 insertions(+), 5 deletions(-) diff --git a/marionette/marionette.d.ts b/marionette/marionette.d.ts index d227ab6064..870484b891 100644 --- a/marionette/marionette.d.ts +++ b/marionette/marionette.d.ts @@ -125,10 +125,46 @@ declare module Backbone { declare module Marionette { - function getOption(target, optionName): any; - function triggerMethod(name, ...args: any[]): any; + /** + * Retrieve an object's attribute either directly from the object, or + * from the object's this.options, with this.options taking precedence. + */ + function getOption(target: any, optionName: string): any; + + /** + * Trigger an event and a corresponding method on the target object. + * All arguments that are passed to the triggerMethod call are passed along + * to both the event and the method, with the exception of the event name not + * being passed to the corresponding method. + */ + function triggerMethod(name: string, ...args: any[]): any; + + /** + * Invoke triggerMethod on a specific context. + * This is useful when it's not clear that the object has triggerMethod defined. + */ + function triggerMethodOn(ctx: any, name: string, ...args: any[]): any; + + /** + * Monitor a view's state, and after it has been rendered and shown in the DOM, + * trigger a "dom:refresh" event every time it is re-rendered. + */ function MonitorDOMRefresh(view: Backbone.View): void; - function bindEntityEvents(target, entity, bindings); + + /** + * This method is used to bind a backbone "entity" (collection/model) to methods on a target object. + * @param target An object that must have a listenTo method from the EventBinder object. + * @param entity The entity (Backbone.Model or Backbone.Collection) to bind the events from. + * @param bindings a hash of { "event:name": "eventHandler" } configuration. Multiple handlers can be separated by a space. A function can be supplied instead of a string handler name. + */ + function bindEntityEvents(target: any, entity: any, bindings: any): void; + + /** + * This method can be used to unbind callbacks from entities' (collection/model) events. It's the opposite of bindEntityEvents + * @param target An object that must have a listenTo method from the EventBinder object. + * @param entity The entity (Backbone.Model or Backbone.Collection) to bind the events from. + * @param bindings a hash of { "event:name": "eventHandler" } configuration. Multiple handlers can be separated by a space. A function can be supplied instead of a string handler name. + */ function unbindEntityEvents(target, entity, bindings); class Callbacks { @@ -1130,25 +1166,82 @@ declare module Marionette { appRoute(route: string, methodName: string): void; } + /** + * The Backbone.Marionette.Application object is the hub of your composite + * application. It organizes, initializes and coordinates the various pieces + * of your app. It also provides a starting point for you to call into from + * your HTML script block, or directly from your JavaScript files if you + * prefer to go that route. The Application is meant to be instantiated + * directly, although you can extend it to add your own functionality. + */ class Application extends Backbone.Events { + /** + * The Event Aggregator is available through this property. It is + * convenient for passively sharing information between pieces of your + * application as events occur. + * Note! To access this application channel from other objects within your + * app you are encouraged to get a handle of the systems through the + * Wreqr API instead of the Application instance itself. + */ vent: Backbone.Wreqr.EventAggregator; + + /** + * Commands are used to make any component tell another component to + * perform an action without a direct reference to it. + */ commands: Backbone.Wreqr.Commands; + + /** + * Request Response is a means for any component to request information + * from another component without being tightly coupled. + */ reqres: Backbone.Wreqr.RequestResponse; + submodules: any; + /** Command execution, facilitated by Backbone.Wreqr.Commands */ execute(...args: any[]); + + /** Request/response, facilitated by Backbone.Wreqr.RequestResponse */ request(...args: any[]); + + /** Deprecated! Initializers, you should use events to manage start-up logic. */ addInitializer(initializer); - start(options?); + + /** + * Once you have your application configured, you can kick everything off + * by calling this method. + * @param options This parameter will be passed to each of your initializer functions, as well as the initialize events. This allows you to provide extra configuration for various parts of your app throughout the initialization sequence. + */ + start(options?: any): void; + + /** Deprecated! nstead of using the Application as the root of your view tree, you should use a Layout View.*/ addRegions(regions); + + /** Deprecated! nstead of using the Application as the root of your view tree, you should use a Layout View.*/ emptyRegions(): void; + + /** Deprecated! nstead of using the Application as the root of your view tree, you should use a Layout View.*/ removeRegion(region: Region); + + /** Deprecated! nstead of using the Application as the root of your view tree, you should use a Layout View.*/ getRegion(regionName: string): Region; + module(moduleNames, moduleDefinition); + + /** + * Called just before the Application starts and before the initializers are executed. + */ + onBeforeStart(options?: any): void; + + /** + * Called after the Application has started and after the initializers have been executed. + */ + onStart(options?: any): void; } - // modules mapped for convenience, but you should probably use TypeScript modules instead + // modules mapped for convenience, but you should probably use TypeScript modules instead class Module extends Backbone.Events { constructor(moduleName: string, app: Application); From 6e46947d5386e7b8cd7589947b6f84ffc6f4dc3e Mon Sep 17 00:00:00 2001 From: Peter Palotas Date: Sun, 28 Dec 2014 23:54:57 +0100 Subject: [PATCH 14/20] Added Marionette.Behavior and Marionette.Behaviors classes (new in Marionette 2.XX). Modified ui property to not neccessarily be a function (it can also be a hash). --- marionette/marionette.d.ts | 86 +++++++++++++++++++++++++++++++++++++- 1 file changed, 85 insertions(+), 1 deletion(-) diff --git a/marionette/marionette.d.ts b/marionette/marionette.d.ts index 870484b891..583a6becb0 100644 --- a/marionette/marionette.d.ts +++ b/marionette/marionette.d.ts @@ -666,6 +666,11 @@ declare module Marionette { constructor(options?: Backbone.ViewOptions); + /** + * Defines behaviors attached to this view. + */ + behaviors: any; + /** * A configuration hash for models. The left side is the event on * the model, and the right side is the name of the @@ -692,7 +697,7 @@ declare module Marionette { * jQuery selector. Afterwards you can simply access it via * this.ui.elementName. */ - ui(): any; + ui: any; /** * There may be some cases where you need to change the template that is @@ -1255,6 +1260,85 @@ declare module Marionette { stopvoid; addDefinition(moduleDefinition, customArgs); } + + /** + * A Behavior is an isolated set of DOM / user interactions that can be mixed + * into any View or another Behavior. Behaviors allow you to blackbox View + * specific interactions into portable logical chunks, keeping your views + * simple and your code DRY. + */ + class Behavior extends Marionette.Object { + constructor(options?: any, view?: any); + + options: any; + + /** + * Any triggers you define on the Behavior will be triggered in response to the appropriate event on the view. + */ + triggers: any; + + /** + * modelEvents will respond to the view's model events. + */ + modelEvents: any; + + /** + * collectionEvents will respond to the view's collection events. + */ + collectionEvents: any; + + /** + * The behaviors key allows a behavior to group multiple behaviors + * together. + */ + behaviors: any; + + /** + * defaults can be a hash or function to define the default options for + * your behavior. The default options will be overridden depending on + * what you set as the options per behavior (this works just like a + * backbone.model). + */ + defaults: any; + + /** + * el is a direct proxy of the view's el + */ + el: any; + + /** + * $el is a direct proxy of the view's el cached as a jQuery selector. + */ + $el: JQuery; + + /** A reference to the view instance that the behavior is on. */ + view: any; + + /** + * $ is a direct proxy of the views $ lookup method. + */ + $(selector: any): JQuery; + } + + /** + * Marionette.Behaviors' is a utility class that takes care of glueing your + * behavior instances to their given View. The most important part of this + * class is that you MUST override the class level behaviorsLookup method or + * set the option behaviorClass for things to work properly. + */ + class Behaviors { + /** + * This method defines where your behavior classes are stored. Override this to provide another lookup. + */ + static behaviorsLookup(): any; + + /** + * This method has a default implementation that is simple to override. It + * is responsible for the lookup of single behavior from within the + * Behaviors.behaviorsLookup or elsewhere. + */ + static getBehaviorClass(options: any, key: string): Behavior; + } } declare module 'backbone.marionette' { From 99fcfbd22158e61aabeda7fe2c4ec18253bc5f6e Mon Sep 17 00:00:00 2001 From: Peter Palotas Date: Mon, 29 Dec 2014 00:28:49 +0100 Subject: [PATCH 15/20] Added missing method attachHtml to Region class. Added initial tests. --- marionette/marionette-tests.ts | 229 +++++++++++++++++++++++++++++++++ marionette/marionette.d.ts | 6 + 2 files changed, 235 insertions(+) create mode 100644 marionette/marionette-tests.ts diff --git a/marionette/marionette-tests.ts b/marionette/marionette-tests.ts new file mode 100644 index 0000000000..a3b81482f4 --- /dev/null +++ b/marionette/marionette-tests.ts @@ -0,0 +1,229 @@ +/// + +module Marionette.Tests { + class DestroyWarn extends Marionette.Behavior { + // you can set default options + // just like you can in your Backbone Models + // they will be overriden if you pass in an option with the same key + defaults = { + "message": "you are destroying!" + }; + + // behaviors have events that are bound to the views DOM + events = { + "click @ui.destroy": "warnBeforeDestroy" + }; + + warnBeforeDestroy() { + alert(this.options.message); + // every Behavior has a hook into the + // view that it is attached to + this.view.destroy(); + } + } + + + Marionette.Behaviors.getBehaviorClass = (options, key) => { + if (key === "DestroyWarn") + return new DestroyWarn(); + + return undefined; + }; + + + class MyApplication extends Marionette.Application { + initialize(options?: any) { + console.log("initializing application"); + this.layoutView = new AppLayoutView(); + } + + layoutView: AppLayoutView; + mainRegion: Marionette.Region; + + onStart() { + this.mainRegion = new Marionette.Region({ el: '#main' }); + this.layoutView.addRegion('main', this.mainRegion); + this.layoutView.render(); + } + } + + class AppLayoutView extends Marionette.LayoutView { + constructor() { + super({ el: 'body' }); + } + + template() { + return "
"; + } + + initialize(options?: any) { + console.log("initializing layoutview"); + } + } + + class MyModel extends Backbone.Model { + + constructor(options?: any) { + super(options); + } + + get name(): string { + return this.get('name'); + } + + set name(value: string) { + this.set(value); + } + } + + class MyView extends Marionette.ItemView { + behaviors: any; + + constructor(model: MyModel) { + this.ui = { + destroy: '.destroy' + }; + + this.behaviors = { + DestroyWarn: { + message: 'hello' + } + }; + + super({ model: model }); + + } + + template() { + return '

Hello from my model

'; + } + }; + + + class MainRegion extends Marionette.Region { + constructor() { + this.el = '#main'; + super(); + } + } + + + class MyObject extends Marionette.Object { + name: string; + options: any; + + constructor() { + this.name = 'Adam'; + + this.options = { + name: 'Foo' + }; + + super(); + this.on("before:destroy", () => { + console.log("before:destroy"); + }); + } + + onBeforeDestroy(arg: any) { + console.log("in onBeforeDestroy with arg " + arg); + } + } + + class MyRegion extends Marionette.Region { + constructor() { + this.el = '#main-nav'; + super(); + } + } + + class MyJQueryRegion extends Marionette.Region { + constructor() { + this.el = $('#main-nav'); + super(); + } + } + + class MyHtmlElRegion extends Marionette.Region { + constructor() { + this.el = document.querySelector("body"); + super(); + } + } + + export var app : MyApplication; + + function ApplicationTests() { + app = new MyApplication(); + + app.start(); + + var view = new MyView(new MyModel()); + app.mainRegion.show(view); + } + + function ObjectTests() { + var obj = new MyObject(); + console.log(obj.getOption('name')); + obj.destroy("goodbye"); + } + + function RegionManagerTests() { + var rm = new Marionette.RegionManager(); + rm.addRegions({ + contentRegion: { + el: '#content', + regionClass: MainRegion + }, + + navigationRegion: { + el: '#navigation', + regionClass: MainRegion, + + // Options passed to instance of `MyOtherRegion` for + // the `navigationRegion` on `App` + navigationOption: 42, + anotherNavigationOption: 'foo' + }, + + footerRegion: { + regionClass: MainRegion, + someOption: 42, + someValue: 'value' + } + }); + } + + function RegionTests() { + var myView : Marionette.View = new MyView(new MyModel()); + + // render and display the view + app.mainRegion.show(myView); + + // empties the current view + app.mainRegion.empty(); + app.mainRegion.show(myView, { preventDestroy: true, forceShow: true, triggerAttach: true, triggerBeforeAttach: false }); + + var hasView : boolean = app.mainRegion.hasView(); + + app.mainRegion.reset(); + + Marionette.Region.prototype.attachHtml = function (view) { + this.$el.empty().append(view.el); + } + + myView = new Marionette.View({ + el: $("#existing-view-stuff") + }); + + app.mainRegion.attachView(myView); + + app.mainRegion.on("empty", function (view, region, options) { + // manipulate the `view` or do something extra + // with the `region` + // you also have access to the `options` that were passed to the Region.show call + }); + + } + +} \ No newline at end of file diff --git a/marionette/marionette.d.ts b/marionette/marionette.d.ts index 583a6becb0..2e503955d4 100644 --- a/marionette/marionette.d.ts +++ b/marionette/marionette.d.ts @@ -323,6 +323,12 @@ declare module Marionette { */ attachView(view: Backbone.View, options?: RegionShowOptions): any; + /** + * Override this method to change how the new view is + * appended to the `$el` that the region is managing + */ + attachHtml(view: Backbone.View): void; + /** * A region can be reset at any time. This destroys any existing view * being displayed, and deletes the cached el. The next time the region From 6689de6b7fd7ec34eb414a75cbd47306cbf34778 Mon Sep 17 00:00:00 2001 From: Peter Palotas Date: Mon, 29 Dec 2014 00:31:10 +0100 Subject: [PATCH 16/20] Removed property accessors from test-file since this wasn't liked by CI build. --- marionette/marionette-tests.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/marionette/marionette-tests.ts b/marionette/marionette-tests.ts index a3b81482f4..d646062feb 100644 --- a/marionette/marionette-tests.ts +++ b/marionette/marionette-tests.ts @@ -67,11 +67,11 @@ module Marionette.Tests { super(options); } - get name(): string { + getName(): string { return this.get('name'); } - set name(value: string) { + setName(value: string) { this.set(value); } } From 02e28cc4b219a46490e0af79668a48e01d310713 Mon Sep 17 00:00:00 2001 From: Peter Palotas Date: Mon, 29 Dec 2014 11:10:56 +0100 Subject: [PATCH 17/20] Added more tests to Marionette.js --- marionette/marionette-tests.ts | 84 +++++++++++++++++++++++++++++++--- marionette/marionette.d.ts | 7 +-- 2 files changed, 82 insertions(+), 9 deletions(-) diff --git a/marionette/marionette-tests.ts b/marionette/marionette-tests.ts index d646062feb..109735d218 100644 --- a/marionette/marionette-tests.ts +++ b/marionette/marionette-tests.ts @@ -25,11 +25,27 @@ module Marionette.Tests { Marionette.Behaviors.getBehaviorClass = (options, key) => { if (key === "DestroyWarn") - return new DestroyWarn(); + return DestroyWarn; return undefined; }; + class MyRouter extends Marionette.AppRouter { + // "someMethod" must exist at controller.someMethod + appRoutes = { + "some/route": "someMethod" + }; + + /* standard routes can be mixed with appRoutes/Controllers above */ + routes = { + "some/otherRoute": "someOtherMethod" + }; + + someOtherMethod() { + // do something here. + } + + } class MyApplication extends Marionette.Application { initialize(options?: any) { @@ -95,7 +111,7 @@ module Marionette.Tests { } template() { - return '

Hello from my model

'; + return '

' + this.model.getName() + '

'; } }; @@ -151,7 +167,39 @@ module Marionette.Tests { } } - export var app : MyApplication; + class MyCollectionView extends Marionette.CollectionView { + constructor() { + this.childView = MyView; + this.childEvents = { + render: function () { + console.log("a childView has been rendered"); + } + }; + + this.childViewOptions = function (model, index) { + // do some calculations based on the model + return { + foo: "bar", + childIndex: index + } + }; + + this.childViewOptions = { + foo: "bar" + }; + + this.childViewEventPrefix = "some:prefix"; + + super(); + + this.on('some:prefix:render', function () { + + }); + + } + } + + export var app: MyApplication; function ApplicationTests() { app = new MyApplication(); @@ -195,16 +243,18 @@ module Marionette.Tests { } function RegionTests() { - var myView : Marionette.View = new MyView(new MyModel()); + var myView: Marionette.View = new MyView(new MyModel()); // render and display the view app.mainRegion.show(myView); // empties the current view app.mainRegion.empty(); + + myView = new MyView(new MyModel()); app.mainRegion.show(myView, { preventDestroy: true, forceShow: true, triggerAttach: true, triggerBeforeAttach: false }); - var hasView : boolean = app.mainRegion.hasView(); + var hasView: boolean = app.mainRegion.hasView(); app.mainRegion.reset(); @@ -225,5 +275,27 @@ module Marionette.Tests { }); } - + + function CollectionViewTests() { + var cv = new MyCollectionView(); + cv.collection.add(new MyModel()); + app.mainRegion.attachView(cv); + } + + class MyController extends Marionette.Controller { + + } + + function AppRouterTests() { + var myController = new MyController(); + var router = new MyRouter(); + + router.appRoute("/foo", "fooThat"); + + router.processAppRoutes(myController, { + "foo": "doFoo", + "bar/:id": "doBar" + }); + + } } \ No newline at end of file diff --git a/marionette/marionette.d.ts b/marionette/marionette.d.ts index 2e503955d4..ac4dbea257 100644 --- a/marionette/marionette.d.ts +++ b/marionette/marionette.d.ts @@ -880,7 +880,7 @@ declare module Marionette { * The keys of the hash can either be a function or a string that is the * name of a method on the collection view. */ - childViewEvents: any; + childEvents: any; /** * When a collection has no children, and you need to render a view other than @@ -1341,9 +1341,10 @@ declare module Marionette { /** * This method has a default implementation that is simple to override. It * is responsible for the lookup of single behavior from within the - * Behaviors.behaviorsLookup or elsewhere. + * Behaviors.behaviorsLookup or elsewhere. Note that it should return the type of the + * class to instantiate, not an instance of that class. */ - static getBehaviorClass(options: any, key: string): Behavior; + static getBehaviorClass(options: any, key: string): any; } } From a5366e60126b78737d9568347f98a594994ff534 Mon Sep 17 00:00:00 2001 From: Peter Palotas Date: Mon, 29 Dec 2014 11:13:58 +0100 Subject: [PATCH 18/20] Changed declaration of Backbone.Router.routes. This is not neccessarily a function, but may also be a simple hash. --- backbone/backbone.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/backbone/backbone.d.ts b/backbone/backbone.d.ts index 0cb827a28e..4176724589 100644 --- a/backbone/backbone.d.ts +++ b/backbone/backbone.d.ts @@ -275,7 +275,7 @@ declare module Backbone { * For assigning routes as object hash, do it like this: this.routes = { "route": callback, ... }; * That works only if you set it in the constructor or the initialize method. **/ - routes(): any; + routes: any; constructor(options?: RouterOptions); initialize(options?: RouterOptions): void; From 02347482ba9a75b40d7804475a5a45ba91cac791 Mon Sep 17 00:00:00 2001 From: Peter Palotas Date: Mon, 29 Dec 2014 11:29:36 +0100 Subject: [PATCH 19/20] - Added a bunch of missing type annotations. --- marionette/marionette.d.ts | 89 +++++++++++++++++++------------------- 1 file changed, 44 insertions(+), 45 deletions(-) diff --git a/marionette/marionette.d.ts b/marionette/marionette.d.ts index ac4dbea257..aa1812e4db 100644 --- a/marionette/marionette.d.ts +++ b/marionette/marionette.d.ts @@ -13,15 +13,15 @@ declare module Backbone { constructor(initialViews?: any[]); - add(view: View, customIndex?: number); - findByModel(model): View; - findByModelCid(modelCid): View; + add(view: View, customIndex?: number): void; + findByModel(model: TModel): View; + findByModelCid(modelCid: string): View; findByCustom(index: number): View; findByIndex(index: number): View; - findByCid(cid): View; + findByCid(cid: string): View; remove(view: View); - call(method); - apply(method: any, args?: any[]); + call(method: any): void; + apply(method: any, args?: any[]): void; //mixins from Collection (copied from Backbone's Collection declaration) @@ -29,7 +29,7 @@ declare module Backbone { any(iterator: (element: View, index: number) => boolean, context?: any): boolean; contains(value: any): boolean; detect(iterator: (item: any) => boolean, context?: any): any; - each(iterator: (element: View, index: number, list?: any) => void, context?: any); + each(iterator: (element: View, index: number, list?: any) => void, context?: any): any; every(iterator: (element: View, index: number) => boolean, context?: any): boolean; filter(iterator: (element: View, index: number) => boolean, context?: any): View[]; find(iterator: (element: View, index: number) => boolean, context?: any): View; @@ -38,7 +38,7 @@ declare module Backbone { include(value: any): boolean; initial(): View; initial(n: number): View[]; - invoke(methodName: string, arguments?: any[]); + invoke(methodName: string, arguments?: any[]): any; isEmpty(object: any): boolean; last(): View; last(n: number): View[]; @@ -97,7 +97,7 @@ declare module Backbone { constructor(options?: any); getCommands(commandName: string): Commands; - addCommand(commandName: string, args: any); + addCommand(commandName: string, args: any): void; clearCommands(commandName: string): void; } @@ -106,14 +106,14 @@ declare module Backbone { constructor(options?: any); storageType: CommandStorage; - execute(name: string, ...args: any[]); + execute(name: string, ...args: any[]): void; } class RequestResponse extends Handlers { constructor(options?: any); - request(...args: any[]); + request(...args: any[]): any; } class EventAggregator extends Backbone.Events { @@ -130,7 +130,7 @@ declare module Marionette { * from the object's this.options, with this.options taking precedence. */ function getOption(target: any, optionName: string): any; - + /** * Trigger an event and a corresponding method on the target object. * All arguments that are passed to the triggerMethod call are passed along @@ -165,7 +165,7 @@ declare module Marionette { * @param entity The entity (Backbone.Model or Backbone.Collection) to bind the events from. * @param bindings a hash of { "event:name": "eventHandler" } configuration. Multiple handlers can be separated by a space. A function can be supplied instead of a string handler name. */ - function unbindEntityEvents(target, entity, bindings); + function unbindEntityEvents(target: any, entity: any, bindings: any); class Callbacks { add(callback: Function, contextOverride: any): void; @@ -182,7 +182,7 @@ declare module Marionette { * Initialize is called immediately after the Object has been instantiated, * and is invoked with the same arguments that the constructor received. */ - initialize(options?: any); + initialize(options?: any): void; /** * Retrieve an object's attribute either directly from the object, or from @@ -326,7 +326,7 @@ declare module Marionette { /** * Override this method to change how the new view is * appended to the `$el` that the region is managing - */ + */ attachHtml(view: Backbone.View): void; /** @@ -442,7 +442,7 @@ declare module Marionette { * Destroys the RegionManager instance entierly which both destroys and * removes all regions from the RegionManager instance. */ - destroy(); + destroy(): void; //mixins from Collection (copied from Backbone's Collection declaration) @@ -475,7 +475,7 @@ declare module Marionette { * is passed. * @alias forEach */ - each(iterator: (element: Region, index: number, list?: any) => void, context?: any); + each(iterator: (element: Region, index: number, list?: any) => void, context?: any): void; /** * Returns true if all of the values in the list pass the predicate truth test. @@ -512,7 +512,7 @@ declare module Marionette { * is passed. * @alias each */ - forEach(iterator: (element: Region, index: number, list?: any) => void, context?: any); + forEach(iterator: (element: Region, index: number, list?: any) => void, context?: any): void; /** * Returns true if the value is present in the list. @@ -531,7 +531,7 @@ declare module Marionette { * Calls the method named by methodName on each value in the collection. Any extra * arguments passed to invoke will be forwarded on to the method invocation. */ - invoke(methodName: string, arguments?: any[]); + invoke(methodName: string, arguments?: any[]): any; /** * Returns true if the RegionManager contains no regions. @@ -736,9 +736,9 @@ declare module Marionette { * extend from View you will need to invoke this method from your render * method. In ItemView and CompositeView this is already taken care of. */ - bindUIElements(); + bindUIElements(): any; - unbindUIElements(); + unbindUIElements(): any; triggerMethod(name, ...args: any[]): any; @@ -748,36 +748,36 @@ declare module Marionette { * shown via a region. A common use case for the onShow method is to * use it to add children views. */ - onShow(); + onShow(): void; /** * Triggered just after the view has been destroyed. */ - onDestroy(); + onDestroy(): void; /** * When destroying a view, an onBeforeDestroy method will be called, if * it has been provided, just before the view destroys. It will be passed * any arguments that destroy was invoked with. */ - onBeforeDestroy(...args: any[]); + onBeforeDestroy(...args: any[]): void; /** * Called anytime that showing the view in a Region causes it to be * attached to the document. */ - onAttach(); + onAttach(): void; /** * Triggered right before the view is attached to the document. */ - onBeforeAttach(); + onBeforeAttach(): void; /** * Triggered after the view has been rendered, has been shown in the DOM via a Marionette.Region, and has been re-rendered. * This event / callback is useful for DOM-dependent UI plugins such as jQueryUI or KendoUI. */ - onDomRefresh(); + onDomRefresh(): void; } /** @@ -813,14 +813,14 @@ declare module Marionette { /** * Triggered before an ItemView is rendered. */ - onBeforeRender(); + onBeforeRender(): void; /** * Triggered after the view has been rendered. You can implement this in * your view to provide custom code for dealing with the view's el after * it has been rendered. */ - onRender(); + onRender(): void; } @@ -921,7 +921,7 @@ declare module Marionette { */ addChild(item: any, ChildView: Backbone.View, index: Number): void; - renderChildView(view: Backbone.View, index: Number); + renderChildView(view: Backbone.View, index: Number): void; /** * When a custom view instance needs to be created for the childView that @@ -935,7 +935,7 @@ declare module Marionette { * Remove the child view and destroy it. This function also updates the indices of * later views in the collection in order to keep the children in sync with the collection. */ - removeChildView(view: any); + removeChildView(view: any): void; /** * Determines if the view is empty. If you want to control when the empty @@ -1130,7 +1130,7 @@ declare module Marionette { * for customized region interactions and business specific * view logic for better control over single regions. */ - getRegionManager(); + getRegionManager(): any; } interface AppRouterOptions extends Backbone.RouterOptions { @@ -1138,11 +1138,11 @@ declare module Marionette { * The appRoutes. */ appRoutes?: any; - + /** * The controller to associate with this router. */ - controller?: any; + controller?: any; } /** @@ -1167,8 +1167,8 @@ declare module Marionette { * this method. However, In this case the current controller of AppRouter * will not change. */ - processAppRoutes(controller: any, appRoutes: any); - + processAppRoutes(controller: any, appRoutes: any): void; + /** * Adds an app route at runtime to this instance. It works the same as the * built-in router.route() call from Backbone's Router, but has all the @@ -1212,13 +1212,13 @@ declare module Marionette { submodules: any; /** Command execution, facilitated by Backbone.Wreqr.Commands */ - execute(...args: any[]); + execute(...args: any[]): void; /** Request/response, facilitated by Backbone.Wreqr.RequestResponse */ - request(...args: any[]); + request(...args: any[]): any; /** Deprecated! Initializers, you should use events to manage start-up logic. */ - addInitializer(initializer); + addInitializer(initializer): void; /** * Once you have your application configured, you can kick everything off @@ -1228,18 +1228,18 @@ declare module Marionette { start(options?: any): void; /** Deprecated! nstead of using the Application as the root of your view tree, you should use a Layout View.*/ - addRegions(regions); + addRegions(regions): any; /** Deprecated! nstead of using the Application as the root of your view tree, you should use a Layout View.*/ emptyRegions(): void; /** Deprecated! nstead of using the Application as the root of your view tree, you should use a Layout View.*/ - removeRegion(region: Region); + removeRegion(region: Region): void; /** Deprecated! nstead of using the Application as the root of your view tree, you should use a Layout View.*/ getRegion(regionName: string): Region; - module(moduleNames, moduleDefinition); + module(moduleNames: any, moduleDefinition: any): Module; /** * Called just before the Application starts and before the initializers are executed. @@ -1262,9 +1262,8 @@ declare module Marionette { addInitializer(callback): void; addFinalizer(callback): void; - start(options?: any): void; - stopvoid; - addDefinition(moduleDefinition, customArgs); + start(options?: any): void; + addDefinition(moduleDefinition: any, customArgs: any): any; } /** From 73604e393ab1d336c3c76a7461dd73e54515e899 Mon Sep 17 00:00:00 2001 From: Peter Palotas Date: Mon, 29 Dec 2014 11:33:25 +0100 Subject: [PATCH 20/20] - Added some more missing type annotations. --- marionette/marionette-tests.ts | 6 +++--- marionette/marionette.d.ts | 20 ++++++++++---------- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/marionette/marionette-tests.ts b/marionette/marionette-tests.ts index 109735d218..eec2db8a41 100644 --- a/marionette/marionette-tests.ts +++ b/marionette/marionette-tests.ts @@ -176,7 +176,7 @@ module Marionette.Tests { } }; - this.childViewOptions = function (model, index) { + this.childViewOptions = function (model: any, index: any): any { // do some calculations based on the model return { foo: "bar", @@ -258,7 +258,7 @@ module Marionette.Tests { app.mainRegion.reset(); - Marionette.Region.prototype.attachHtml = function (view) { + Marionette.Region.prototype.attachHtml = function (view: any): void { this.$el.empty().append(view.el); } @@ -268,7 +268,7 @@ module Marionette.Tests { app.mainRegion.attachView(myView); - app.mainRegion.on("empty", function (view, region, options) { + app.mainRegion.on("empty", function (view: any, region: any, options: any) { // manipulate the `view` or do something extra // with the `region` // you also have access to the `options` that were passed to the Region.show call diff --git a/marionette/marionette.d.ts b/marionette/marionette.d.ts index aa1812e4db..397da6fab2 100644 --- a/marionette/marionette.d.ts +++ b/marionette/marionette.d.ts @@ -19,7 +19,7 @@ declare module Backbone { findByCustom(index: number): View; findByIndex(index: number): View; findByCid(cid: string): View; - remove(view: View); + remove(view: View): void; call(method: any): void; apply(method: any, args?: any[]): void; @@ -34,7 +34,7 @@ declare module Backbone { filter(iterator: (element: View, index: number) => boolean, context?: any): View[]; find(iterator: (element: View, index: number) => boolean, context?: any): View; first(): View; - forEach(iterator: (element: View, index: number, list?: any) => void, context?: any); + forEach(iterator: (element: View, index: number, list?: any) => void, context?: any): void; include(value: any): boolean; initial(): View; initial(n: number): View[]; @@ -88,7 +88,7 @@ declare module Backbone { setHandler(name: string, handler: any, context?: any): void; hasHandler(name: string): boolean; getHandler(name: string): Function; - removeHandler(name: string); + removeHandler(name: string): void; removeAllHandlers(): void; } @@ -165,7 +165,7 @@ declare module Marionette { * @param entity The entity (Backbone.Model or Backbone.Collection) to bind the events from. * @param bindings a hash of { "event:name": "eventHandler" } configuration. Multiple handlers can be separated by a space. A function can be supplied instead of a string handler name. */ - function unbindEntityEvents(target: any, entity: any, bindings: any); + function unbindEntityEvents(target: any, entity: any, bindings: any): void; class Callbacks { add(callback: Function, contextOverride: any): void; @@ -740,7 +740,7 @@ declare module Marionette { unbindUIElements(): any; - triggerMethod(name, ...args: any[]): any; + triggerMethod(name: string, ...args: any[]): any; /** * Called on the view instance when the view has been rendered and @@ -1218,7 +1218,7 @@ declare module Marionette { request(...args: any[]): any; /** Deprecated! Initializers, you should use events to manage start-up logic. */ - addInitializer(initializer): void; + addInitializer(initializer: any): void; /** * Once you have your application configured, you can kick everything off @@ -1228,7 +1228,7 @@ declare module Marionette { start(options?: any): void; /** Deprecated! nstead of using the Application as the root of your view tree, you should use a Layout View.*/ - addRegions(regions): any; + addRegions(regions: any): any; /** Deprecated! nstead of using the Application as the root of your view tree, you should use a Layout View.*/ emptyRegions(): void; @@ -1258,10 +1258,10 @@ declare module Marionette { constructor(moduleName: string, app: Application); submodules: any; - triggerMethod(name, ...args: any[]): any; + triggerMethod(name: string, ...args: any[]): any; - addInitializer(callback): void; - addFinalizer(callback): void; + addInitializer(callback: any): void; + addFinalizer(callback: any): void; start(options?: any): void; addDefinition(moduleDefinition: any, customArgs: any): any; }