diff --git a/marionette/marionette-tests.ts b/marionette/marionette-tests.ts new file mode 100644 index 000000000..a3b81482f --- /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 583a6becb..2e503955d 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