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