Showing preview only (1,026K chars total). Download the full file or copy to clipboard to get everything.
Repository: marionettejs/backbone.marionette
Branch: master
Commit: 85936fc518dd
Files: 141
Total size: 979.0 KB
Directory structure:
gitextract_hmkqpmmu/
├── .babelrc
├── .editorconfig
├── .eslintrc
├── .gitignore
├── .npmignore
├── .travis.yml
├── CONTRIBUTING.md
├── ISSUE_TEMPLATE.md
├── PULL_REQUEST_TEMPLATE.md
├── bower.json
├── changelog.md
├── docs/
│ ├── backbone.radio.md
│ ├── basics.md
│ ├── classes.md
│ ├── common.md
│ ├── dom.api.md
│ ├── dom.interactions.md
│ ├── dom.prerendered.md
│ ├── events.class.md
│ ├── events.entity.md
│ ├── events.md
│ ├── features.md
│ ├── installation.md
│ ├── marionette.application.md
│ ├── marionette.behavior.md
│ ├── marionette.collectionview.md
│ ├── marionette.mnobject.md
│ ├── marionette.region.md
│ ├── marionette.view.md
│ ├── readme.md
│ ├── routing.md
│ ├── upgrade-v2-v3.md
│ ├── upgrade-v3-v4.md
│ ├── utils.md
│ ├── view.lifecycle.md
│ └── view.rendering.md
├── lib/
│ ├── backbone.marionette.esm.js
│ └── backbone.marionette.js
├── license.txt
├── package.json
├── readme.md
├── rollup.config.js
├── src/
│ ├── application.js
│ ├── backbone.marionette.js
│ ├── behavior.js
│ ├── child-view-container.js
│ ├── collection-view.js
│ ├── common/
│ │ ├── bind-events.js
│ │ ├── bind-requests.js
│ │ ├── build-region.js
│ │ ├── get-option.js
│ │ ├── merge-options.js
│ │ ├── monitor-view-events.js
│ │ ├── normalize-methods.js
│ │ ├── trigger-method.js
│ │ └── view.js
│ ├── config/
│ │ ├── dom.js
│ │ ├── features.js
│ │ └── renderer.js
│ ├── mixins/
│ │ ├── behaviors.js
│ │ ├── common.js
│ │ ├── delegate-entity-events.js
│ │ ├── destroy.js
│ │ ├── events.js
│ │ ├── radio.js
│ │ ├── regions.js
│ │ ├── template-render.js
│ │ ├── triggers.js
│ │ ├── ui.js
│ │ └── view.js
│ ├── object.js
│ ├── region.js
│ ├── utils/
│ │ ├── deprecate.js
│ │ ├── error.js
│ │ ├── extend.js
│ │ ├── get-namespaced-event-name.js
│ │ ├── invoke.js
│ │ └── proxy.js
│ └── view.js
├── test/
│ ├── .eslintrc
│ ├── .globals.json
│ ├── .mocharc.json
│ ├── browsersync.html
│ ├── rollup.config.js
│ ├── runner.html
│ ├── setup/
│ │ ├── browser.js
│ │ ├── node.js
│ │ └── setup.js
│ └── unit/
│ ├── README.md
│ ├── application.spec.js
│ ├── backbone.marionette.spec.js
│ ├── behavior.spec.js
│ ├── child-view-container.spec.js
│ ├── collection-view/
│ │ ├── collection-view-children.spec.js
│ │ ├── collection-view-childviewcontainer.sepc.js
│ │ ├── collection-view-data.spec.js
│ │ ├── collection-view-empty.spec.js
│ │ ├── collection-view-filtering.spec.js
│ │ ├── collection-view-sorting.spec.js
│ │ ├── collection-view-viewmixin.spec.js
│ │ └── collection-view.spec.js
│ ├── common/
│ │ ├── bind-events.spec.js
│ │ ├── bind-request.spec.js
│ │ ├── build-region.spec.js
│ │ ├── get-option.spec.js
│ │ ├── merge-options.spec.js
│ │ ├── monitor-view-events.js
│ │ ├── normalize-methods.spec.js
│ │ ├── trigger-method.spec.js
│ │ └── view.spec.js
│ ├── config/
│ │ ├── dom.js
│ │ ├── features.spec.js
│ │ └── renderer.spec.js
│ ├── destroying-views.spec.js
│ ├── get-immediate-children.spec.js
│ ├── mixins/
│ │ ├── behaviors.spec.js
│ │ ├── common.spec.js
│ │ ├── delegate-entity-events.spec.js
│ │ ├── destroy.spec.js
│ │ ├── radio.spec.js
│ │ ├── template-render.spec.js
│ │ ├── ui.spec.js
│ │ └── view.spec.js
│ ├── object.spec.js
│ ├── on-attach.spec.js
│ ├── on-dom-refresh.spec.js
│ ├── on-dom-remove.spec.js
│ ├── region.spec.js
│ ├── utils/
│ │ ├── deprecate.spec.js
│ │ ├── error.spec.js
│ │ ├── get-namespaced-event-name.spec.js
│ │ └── proxy.spec.js
│ ├── view.child-views.spec.js
│ ├── view.dynamic-regions.spec.js
│ ├── view.renderer.js
│ ├── view.spec.js
│ ├── view.triggers.spec.js
│ ├── view.ui-bindings.spec.js
│ └── view.ui-event-and-triggers.spec.js
├── trigger-deploy-mn-com.js
└── upgradeGuide.md
================================================
FILE CONTENTS
================================================
================================================
FILE: .babelrc
================================================
{
"presets": ["@babel/env"],
"env": {
"test": {
"plugins": ["istanbul"]
}
}
}
================================================
FILE: .editorconfig
================================================
# EditorConfig is awesome: http://EditorConfig.org
root = true;
[*]
# Ensure there's no lingering whitespace
trim_trailing_whitespace = true
# Ensure a newline at the end of each file
insert_final_newline = true
[*.js]
charset = utf-8
indent_style = space
indent_size = 2
================================================
FILE: .eslintrc
================================================
{
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module"
},
"env": {
"browser": true,
"node": true
},
"rules": {
"array-bracket-spacing": [ 2, "never" ],
"block-scoped-var": 2,
"brace-style": [ 2, "1tbs", { "allowSingleLine": true } ],
"camelcase": [ 2, { "properties": "always" } ],
"curly": [ 2, "all" ],
"dot-notation": [ 2, { "allowKeywords": true } ],
"eol-last": 2,
"eqeqeq": [ 2, "allow-null" ],
"guard-for-in": 2,
"indent": [ 2, 2, { "SwitchCase": 1 } ],
"key-spacing": [ 2,
{
"beforeColon": false,
"afterColon": true
}
],
"keyword-spacing": [ 2 ],
"new-cap": 2,
"no-bitwise": 2,
"no-caller": 2,
"no-eval": 2,
"no-extend-native": 2,
"no-iterator": 2,
"no-loop-func": 2,
"no-multi-spaces": "error",
"no-multi-str": 2,
"no-multiple-empty-lines": 2,
"no-new": 2,
"no-proto": 2,
"no-script-url": 2,
"no-sequences": 2,
"no-shadow": 2,
"no-spaced-func": 2,
"no-trailing-spaces": 2,
"no-unused-vars": [ 1, { "args": "none" } ],
"no-var": 2,
"no-with": 2,
"object-shorthand": [ 2, "methods" ],
"operator-linebreak": [ 2, "after" ],
"quotes": [ 2, "single" ],
"semi": [ 0, "never" ],
"space-before-blocks": [ 2, "always" ],
"space-before-function-paren": [ 2, "never" ],
"space-in-parens": [ 2, "never" ],
"space-infix-ops": 2,
"space-unary-ops": [ 2,
{
"nonwords": false,
"overrides": {}
}
],
"strict": 0,
"valid-jsdoc": 2,
"wrap-iife": [ 2, "inside" ]
}
}
================================================
FILE: .gitignore
================================================
.DS_Store
*.swp
*.swo
*.orig
.idea
ext/
# Logs
logs
*.log
# Runtime data
pids
*.pid
*.seed
# Dependency directory
node_modules
# Testing
coverage
test/tmp
.nyc_output
# Users Environment Variables
.lock-wscript
================================================
FILE: .npmignore
================================================
bower_components
coverage
docs
src
test
tmp
.babelrc
.editorconfig
.eslintrc
.gitignore
.nyc_output
.travis.yml
bower.json
CONTRIBUTING.md
ISSUE_TEMPLATE.md
marionette-logo.png
PULL_REQUEST_TEMPLATE.md
trigger-deploy-mn-com.js
upgradeGuide.md
yarn.lock
================================================
FILE: .travis.yml
================================================
language: node_js
node_js:
- "10"
cache: yarn
env:
- TEST_SUITE=coverage
- TEST_SUITE=browser
- TEST_SUITE=lodash USE_LODASH=1
after_install:
- yarn install travis-ci
script:
- if [[ $TEST_SUITE = "coverage" ]]; then yarn run coveralls; fi
- if [[ $TEST_SUITE = "browser" ]] && [[ $SAUCE_USERNAME ]]; then yarn run test-cross-browser; fi
- if [[ $TEST_SUITE = "lodash" ]]; then yarn run test-lodash; fi
after_success:
- if [[ $TRAVIS_BRANCH = "master" ]] && [[ $TRAVIS_PULL_REQUEST = "false" ]]; then node trigger-deploy-mn-com.js; fi
================================================
FILE: CONTRIBUTING.md
================================================
Marionette has a few guidelines to facilitate your contribution and streamline
the process of getting changes merged in and released.
1. [Setting up Marionette locally](#setting-up-marionette-locally)
2. [Reporting a bug](#reporting-a-bug)
3. [Submitting patches and fixes](#submitting-patches-and-fixes)
4. [Running Tests](#running-tests)
## Setting up Marionette locally
* Fork the Marionette repo.
* `git clone` your fork onto your computer.
* Run `yarn install` to make sure you have all Marionette dependencies locally.
* Run `yarn build` to build source files.
## Reporting a bug
In order to best help out with bugs, we need to know the following information
in your bug submission:
* Marionette version #.
* Backbone version #.
Including this information in a submission will help us test the problem and
ensure that the bug is both reproduced and corrected on the platforms /
versions that you are having issues with.
<a name="format-desc"></a>**Provide A Meaningful Description**
It is very important to provide a meaningful description with your bug reports
and pull requests. A good format for these descriptions will include the
following things:
1. The problem you are facing (in as much detail as is necessary to describe
the problem to someone who doesn't know anything about the system you're
building)
2. A summary of the proposed solution
3. A description of how this solution solves the problem, in more detail than
item #2
4. Any additional discussion on possible problems this might introduce,
questions that you have related to the changes, etc.
For a PR, we need at least the first 2 items to understand why you are changing
the code. If not, we will ask that you add the necessary information.
Please refrain from giving code examples in altJS languages like CoffeeScript,
etc. Marionette is written in plain-old JavaScript and is generally easier for all
members in the community to read.
### When you don't have a bug fix
If you are stuck in a scenario that fails in your app, but you don't know how to
fix it, submit a failing spec to show the failing scenario. Follow the
guidelines for a pull request submission, but don't worry about fixing the
problem. A failing spec to show that a problem exists is a very very very
helpful pull request for us.
We'll even accept a failing test pasted into the ticket description instead of a
PR. That would at least get us started on creating the failing test in the code.
## Submitting patches and fixes
See [Github's documentation for pull
requests](https://help.github.com/articles/using-pull-requests).
Pull requests are by far the best way to contribute to Marionette. They are by
far the easiest way to demonstrate issues and your proposed resolution. To
really help us evaluate your pull request and bring it into Marionette, please
provide as much information as possible and follow the guidelines below:
1. Determine the branch as your base: `next` or `master`
2. Provide a brief summary of what your pull request is doing
3. Reference any relevant Github issue numbers
4. Include any extra detail you feel will help provide context
### Determining your branch
When submitting your pull request, you need to determine whether to base off
`next` or `master`:
* If you're submitting a bug fix, base off `next`
* If you're submitting a new feature, base off `next`
* If you're submitting documentation for a new feature, base off `next`
* If you're submitting documentation for the current release, base off `master`
### Submitting a Great Patch
We want Marionette to provide a great experience to developers and help you
write great applications using it. To help us achieve this goal, please follow
these guidelines when submitting your patches.
#### Solving Issues
When you're submitting a bug fix, include spec tests, where applicable, showing
the issue and the resolution. We strive to maintain 100% code coverage in our
testing.
#### Coding Guidelines
The Marionette coding conventions are provided in the ESLint configuration
included in the repository. Most IDEs and text editors will provide, or allow
for, a plugin for ESLint to read the `.eslintrc` file.
For areas where the configuration provides no guidance, try to stick to the
conventions in the file you're editing.
#### How we Approve Pull Requests
We utilise Github's review approach. When receiving your pull request, we will
comment inline and provide guidance to help you get your pull request merged
into Marionette. This is not a one-way process and we're more than happy to
discuss the context of your decisions.
Once two Marionette.js members approve the pull request, we will then merge it
into the base branch.
Please remember that Marionette is a community-maintained project and, as such,
many of us are working on this in our spare time. If we haven't commented on
your pull request, please be patient. We may be available on our Gitter channel
to discuss further.
## Running Tests
* via command-line by running `yarn test`
* in the browser by running `yarn test-browser`
To see the test matrix - run `yarn coverage`
## Writing Tests and Code Style
[More information]('test/unit/README.md')
================================================
FILE: ISSUE_TEMPLATE.md
================================================
### Description
1. The problem you are facing (in as much detail as is necessary to describe the problem to someone who doesn't know anything about the system you're building)
2. A summary of the proposed solution
3. A description of how this solution solves the problem, in more detail than item #2
4. Any additional discussion on possible problems this might introduce, questions that you have related to the changes, etc.
### Expected behavior
Tell us what you think should happen.
### Actual behavior
If possible, please create a small demo that demonstrates the issue.
You can fork https://jsfiddle.net/marionettejs/adhv48ky/ for quick demo setup.
Please refrain from giving code examples in altJS languages like CoffeeScript, etc. Marionette is written in plain-old JavaScript and is generally easier for all members in the community to read.
### Environment
1. Marionette version:
2. Backbone version:
3. Additional build tools, etc:
================================================
FILE: PULL_REQUEST_TEMPLATE.md
================================================
### Proposed changes
-
-
-
Link to the issue:
================================================
FILE: bower.json
================================================
{
"name": "backbone.marionette",
"description": "The Backbone Framework",
"homepage": "https://marionettejs.com/",
"version": "4.1.3",
"main": "./lib/backbone.marionette.js",
"license": "MIT",
"keywords": [
"backbone",
"framework",
"client",
"browser",
"composite"
],
"author": {
"name": "Derick Bailey",
"email": "derickbailey@gmail.com"
},
"ignore": [
"docs",
"src",
"test",
".babelrc",
".editorconfig",
".eslintrc",
".gitignore",
".jscsrc",
".npmignore",
".travis.yml",
"CONTRIBUTING.md",
"upgradeGuide.md"
],
"dependencies": {
"backbone.radio": "^2.0.0"
}
}
================================================
FILE: changelog.md
================================================
### v4.1.3 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v4.1.2...v4.1.3)
#### Fixes
* unbindRequests now passes context.
### v4.1.2 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v4.1.1...v4.1.2)
#### Fixes
* Error in the build's version number.
### v4.1.1 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v4.1.0...v4.1.1)
#### Fixes
* Error in the build
### v4.1.0 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v4.0.0...v4.1.0)
#### Features
* `CollectionView#addChildView` now accepts a `preventRender` option.
* Marionette now uses `el.ownerDocument.documentElement;` by default instead of `document.documentElement` for querying, customizable via `DomApi.getDocumentEl`.
* The UMD build now reinstates `noConflict` for using multiple versions on the global scope.
#### Fixes
* Fixed a case where a child view could potentially get multiple `destroy` events.
* Pre-rendered views from outside of a region will now correctly empty an current view in a region if shown.
* `CollectionView`'s `emptyView` will now respect the `childViewContainer` for attachment.
#### Misc
* Updated backbone dependency to allow for 1.4 without a warning.
* Tooling and testing was updated and improved removing gulp.
* `Region._setElement` was added for internal use, but may be made public in a future release.
### v4.0.0 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v3.5.1...v4.0.0)
#### Breaking Changes
The breaking changes are documented in the [upgrade guide](https://marionettejs.com/docs/v4.0.0/upgrade-v3-v4.html).
#### Features
* `CollectionView` can now render a template in the same fashion of the removed `CompositeView`.
* `View#triggers` now passes the originating DOM event object as the final argument of the triggered Mn event.
* View classes now have the `bindRequests` and `unbindRequests` API.
* The ES6 package was exposed in `package.json` on `jsnext:main`
* The underscore dependency was updated to include 1.8.3 - 1.9.x.
#### Documentation
The documentation structure was overhauled to provide a flow to reading through the docs.
### v3.5.1 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v3.5.0...v3.5.1)
#### Fixes
* `View` entity events set in `initialize` were being undelegated if `modelEvents` or `collectionEvents` were undefined.
### v3.5.0 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v3.4.4...v3.5.0)
#### Features
* `NextCollectionView`'s `filter` event now returns the attaching and detached views.
* `unbindEvents` and `unbindRequests` can now be called without handlers to remove all handlers from an entity.
#### Fixes
* If an event handler on a behavior was undefined it would remove any prior defined handler.
* When a behavior is destroyed it will now undelegate the behavior events and triggers.
* When a view was added a performance check on `NextCollectionView` would sometimes prevent existing views from sorting correctly.
* `NextCollectionView` `viewFilter` will now be called with the same arguments with underscore or lodash.
#### Deprecations
* Multiple handlers for a single event. If needed, use a single handler to call multiple methods.
### v3.4.4 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v3.4.3...v3.4.4)
#### Fixes
* Prevent exception when a view is instantiated with a non-existing selector `el`.
* When a collection defines the `NextCollectionView` sort order, the add at end performance improvement was removed to prevent edge case errors.
* `NextCollectionView` no longer sorts according to the collection if `sortWithCollection` is set to false.
* When views added to `NextCollectionView` from a collection don't have a matching model, removing the model no longer throws an error.
#### Misc
* `NextCollectionView` now uses backbone update flags instead of calculating changes for sorting
### v3.4.3 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v3.4.2...v3.4.3)
#### Fixes
* `NextCollectionView` collection single model remove no longer incorrectly removes all children
* `EmptyView` will correctly display if a `NextCollectionView` is rendered in `initialize`
### v3.4.2 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v3.4.1...v3.4.2)
#### Fixes
* Regions will now ensure there is only one node in its `$el`
* Regions will not query outside of the parent view if the selector is not found in its context
* The `setDomApi` and `setRenderer` class methods now correctly return the prototype when called
### v3.4.1 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v3.4.0...v3.4.1)
#### Fixes
* Options passed to a behavior are now correctly passed to the behavior
* The ES6 module is no longer exposed in `package.json` as this was breaking for some builds
* The `detachContents` will now correctly detach when using `monitorViewEvents: false` on a `NextCollectionView`
### v3.4.0 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v3.3.1...v3.4.0)
#### Features
* A new build of Marionette supporting ES6 modules was added
* Added DOM API to encapsulate DOM interactions in the views and region
* `monitorViewEvents` was added as an option to all Views to disable DOM lifecycle events
* Added `swapChildViews` to `NextCollectionView`
* Added `viewComparator: false` option to `NextCollectionView` for disabling the default sort
#### Experimental API Breaking Changes
* DOM Mixin was removed (replaced with DOM API)
* `NextCollectionView` `attachHtml` no longer receives the view as the first argument
#### Fixes
* A region's currentView will now be set during that view's initial `dom:refresh` event
* A view will now be considered rendered if its `el` has contents and not only if it has an `el`
#### Misc
* While `Backbone.Radio` is still a dependency, it will no longer cause Marionette to error if nonexistent
* Various performance improvements
### v3.3.1 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v3.3.0...v3.3.1)
#### Fixes
* Behavior `defaults` deprecation notice was always triggering
* Regions threw an error if a childview destroy resulted in a parent view destroy
### v3.3.0 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v3.2.0...v3.3.0)
#### Features
* Added `removeView` and `isSwapping` to `Region` to better support animation
* `NextCollectionView` added as a potential replacement for `CollectionView` in v4
* Added view `initialize` event to behaviors
* `getRegion` will now render the region's view if it is currently not rendered
* If a `behavior` or a `region` is destroyed it will now be removed from the view
* Added `onDomRemove` event for better clean up of things added in `onDomRefresh`
* `childViewEventPrefix` feature flag to allow for `false` by default
* Support custom renderers per view prototype
#### Fixes
* Trigger `detach` events when restoring el
#### Deprecations
* `template: false` deprecated in favor of `template: _.noop`
* Behavior `defaults` deprecated in favor of setting `options` on the Behavior definition
* `Marionette.Renderer` in favor of new custom view renderer.
#### Misc
* Update babel and build tools
* Fix tests runner for IE11
### v3.2.0 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v3.1.0...v3.2.0)
#### Features
* Separate Mn DOM interaction into a mixin for DOM plugin ease
* `View.childViewEvents` should support `trigger`
* Allow showing a template or static string in a region
* Feature/trigger method event args
#### Fixes
* Custom `CollectionView.viewComparator` no longer sorts `collection.models`
* `CollectionView` re-indexes correctly when removing views.
* `CollectionView.filter` can filter by `View` child index
* `Region` will no longer detach pre-existing HTML when `View`'s el is already in the region
* Fix `Region` clean up when `View` is `destroy`ed
* Destroy `CollectionView.children` by `View` and not `Model`
#### Misc
* Remove `MarionetteError` "ViewDestroyError" from `View`'s
### v3.1.0 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v3.0.0...v3.1.0)
#### General
* Performance optimizations for `triggerMethod`, `mergeOptions` and other internal event handlers
* Significant render and removal optimizations for CollectionView utilizing Backbone's `update` event
#### Features
* `Region.detachView` and `View.detachChildView` were added for removing a view from a region without destroying it. This is preferred to the now deprecated `preventDestroy` region show/empty option
* `childViewEventPrefix: false` will disable auto-proxying of child events to the parent view
* `Application` will now accept a region definition object literal as an instantiation option
* Regions are now destroyed when removed from a View
#### Fixes
* Fixed an issue with Lodash 4 compatibility related to behavior events
#### Deprecations
* Region `empty`'s `preventDestroy` option was deprecated in favor of `detachView`
* A region definition object literal's `selector` key was deprecated due to redundacy in favor of the existing key `el`
#### Misc
* Many documentation fixes for v3
* Removed shouldReplace logic from `attachHtml` so overriding no longer breaks `replaceElement` functionality
* Exposed `View.normalizeUIString` for external libraries
* Improvements were made for Views initialized with existing DOM elements
### v3.0.0
Version 3.0.0 of Marionette has arrived and contains many improvements over version
2.x but also some API Changes. Below is a list of the changes made to each component.
To help the community transition over we have released a v2 patch tool to assist
the upgrade. [Marionette Patch Tool] (https://github.com/marionettejs/marionette-v3-compat)
#### View
* `LayoutView` + `ItemView` merge and rename to `View`.
* `Marionette.View` -> `ViewMixin`
* Added `LayoutView` shortcut methods such as `showChildView`.
* `isDestroyed` and `isRendered` made private with a public accessor method.
* Now set `_isDestroyed` to false by default
* Call `Backbone.View` with result of options (163188eeb8)
* `CompositeView`'s `renderChildren` is now public.
* Renamed `childEvents` to `childViewEvents`.
* Removed passing view options as a function
* Renamed `templateHelpers` to `templateContext`
* Made sure `before:render` is triggered before emptying regions.
* Regions are not attached directly to the layout. Use `getRegion` to access the region or `showChildView` to show a `View` within it.
* Allowed `CompositeView` to attach to existing HTML with `template:false`
* Added `hasRegion` for layouts
* Enabled passing `preventDestroy` to `region.empty`.
* `View` now removes its element before destroying child regions. There was an option to turn it on, but now it’s available by default. This helps remove all of the synchronous paints going up the tree.
#### CollectionView
* The `childView` attribute now accepts a function
* `getChildView` was removed
* `emptyView` now accepts a function as an arg.
* Proxied events do not append “this” as an argument
* Removed the `apply:filter` event from `CollectionView`.
* `removeChildView` now returns the removed view.
#### Regions
* Fixed inconsistency in `addRegion`, it now behaves like `addRegions` and adds the region to internal this.regions.
* `View` can replace regions's el.
* Replaced region manager with `region-mixin`.
* Removed static `buildRegion`
* Removed `swap` events.
#### Application
* Introduced region to `Application` (`rootRegion`)
* Removed regions
* Removed Initializers and Finalizers Callbacks
* Removed Application `vent`, `commands`, `requests`
#### Object
* Added support for `Object.isDestroyed`
#### ES6
* Added Rest & Spread ES6 syntax
* using ES6 Modules
* Replaced `var` and `let` with `const`.
#### General Enhancements
* Added `DEV_MODE`
* Changed `_.rest` multiple arg usage to drop for lodash 3 support.
* Behavior, View Mixins.
* Added `cid` field to object, application, behavior, and region
* Added `TemplateCache` options.
* Allow a user to define trigger handlers in options.
* Increased Lodash compatibility, (now supports upto lodash 4)
* Added first class support for Backbone.Radio in Mn.Object
* Updated BB and _ deps to modern versions
* Updated Radio from 0.9 to 2.0
* `delegateEntityEvents`. Delegate Events used to set delegate entity events, it was extracted because now backbone calls delegateEvent everytime the element is set.
* Added `Backbone.Babysitter` to `Mn` and removed the Babysitter dependency.
#### Deprecations
* Deprecated `CompositeView`
* Deprecated `Behavior` Lookups.
#### Removed
* Removed `Marionette.Module` - there’s a shim that you can pull in to get Module and Deferred
* Removed `Marionette.Deferred`
* Removed `component.json`
* Removed `Controller`
* Removed `Callbacks`
* Removed `Wreqr` (replaced with `Radio`)
* Removed `actAsCollection`
* Removed `_getValue`.
#### API Renames
* Renamed `render:collection` => `render:children`
* Renamed `bindEntityEvents` => `bindEvents`.
### v3.0.0-pre5
#### Documentation
* Improved installation docs.
* Updated `CollectionView` docs to reflect API changes.
* Improved `Behavior` docs.
* Improved functions docs.
* Improved update guide.
* Added "basics" docs.
#### API Changes
* `emptyView` now accepts a function as an arg.
* Removed the `apply:filter` event from `CollectionView`.
* `removeChildView` now returns the removed view.
* `bindEntityEvents` renamed `bindEvents`.
* Deprecated Behavior Lookups.
* Added Backbone.Babysitter to Mn and removed the Babysitter dependency.
#### Bug fixes
* `CollectionView` now only triggers `destroy:children` if it has been rendered.
* Parent views will now successfully listen for `destroy` in `childViewEvents`.
#### Misc
* Replaced `var` and `let` with `const`.
* Added consistent function declarations and added rules to eslint.
* Tweaked peerDependencies to only allow patch versions.
* Directory structure changes and file naming consistency.
* Improved test coverage.
* Removed bundled build.
### v3.0.0-pre4
#### Documentation
* Improved `View` documentation.
* Added `Backbone.Radio` integration documentation.
* Fixed broken links in `CollectionView` documentation.
* Removed `Marionette.Module` documentation.
* Add installation documentation.
* Removed outdated API documentation.
* Added Upgrade Guide.
#### API Changes
* return `this` from all functions that do not return anything, useful for chaining.
* Removed `getValue` and internal `getOption`.
#### Bug fixes
* CollectionView#reorder will no longer remove an already displayed emptyView.
* Calling `Backbone.View` constructor with arguments consistently across all views.
* Monitor for child already attached.
* When a view is attached to an existing element, `isRendered()` should reflect `true`.
* Region empty edge-case fix that prevents view destroy handlers calling `empty`.
* Region now detaches previous html if there is no view.
#### Misc
* Build browser tests with rollup.
* Fix bundled build.
* Linter fixes.
Also, [please help us finish v3](https://github.com/marionettejs/backbone.marionette/milestones/v3.0.0)!
### v3.0.0-pre3
#### Dependency Updates
* Backbone and Underscore moved to peerDependencies to solve dependency conflicts for browserify and webpack users.
* Added support for Lodash 4.
#### Documentation
* Application documentation updates.
#### API Changes
* Removed unused `collection` parameter from `CollectionView.isEmpty`.
#### Bug fixes
* `replaceElement` and `allowMissingEl` are now able to be overridden in `Region.show`.
#### Misc
* Gulp test-browser task fixed.
* es-lint fixes.
* Added more es6 syntax.
* Fixed the UMD exported build.
Also, [please help us finish v3](https://github.com/marionettejs/backbone.marionette/milestones/v3.0.0)!
### v3.0.0-pre2
Extra release to remove public release of v3.0.0-pre.1, this release is available via the `prerelease` tag on npm.
### v3.0.0-pre.1
This is a "family and friends" release. The documentation is still mostly for 2.4.4.
Please let us know if you run into any issues. Also, [please help us finish v3](https://github.com/marionettejs/backbone.marionette/milestones/v3.0.0)!
### v2.4.7 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v2.4.6...v2.4.7)
#### Fixes
* CollectionView#reorder will no longer remove an already displayed emptyView.
* Fixed build of sourcemap files.
### v2.4.6 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v2.4.5...v2.4.6)
#### Misc
* Updated Backbone dependency to 1.3.x.
### v2.4.5 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v2.4.4...v2.4.5)
#### Fixes
* `Marionette.View#ui` will now bind events when names are hyphenated.
* Nonexistent event handlers now fail silently.
#### Misc
* Updated Backbone dependency to 1.3.3.
* devDependencies updated.
* Updated uglify to fix deprecated sourcemap pragma //@ replaced with //#.
### v2.4.4 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v2.4.3...v2.4.4)
#### Fixes
* `Region#empty` will return the region instance whether or not it has a current view.
* `CollectionView#reorder` will now correctly respect any set filter.
* Fixed `childEvents` failing to trigger during showing a view in a region.
* Stop deleting the `currentView._parent` if showing the same view in a region.
#### Misc
* `LayoutView#showChildView` new `options` argument passed to underlying `Region#show` to enable full `show` functionality.
* Added support for passing down arguments to `Object#destroy`.
### v2.4.3 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v2.4.2...v2.4.3)
#### Fixes
* `TemplateCache#loadTemplate` accepts empty script-tag templates.
* Parent LayoutView's `childEvents` continue working with views attached manually using `Region#attachView`.
* When an array of items (length > 1) are added to a collection backing a CollectionView using the `at` option, the child views are appended to the DOM in the proper order.
* When models are added to a collection backing a CollectionView with the `at` option, the child views are rendered in the proper order even when the CollectionView has a filter.
* `CollectionView#isEmpty` respects a `false` return value even when there are no child views.
* `Region#empty` reliably destroys views when called with options.
* CollectionView child views can, in turn, render children within `onBeforeShow` as documented.
* CollectionView `childView` and `emptyView` can be pure `Backbone.View` classes.
#### Docs
* Better documentation around view `childEvents` that reinforces the distinction between child view `triggers` and `events`.
* Guidance on achieving full event lifecycle while using `Backbone.View` as the child view within CollectionViews or LayoutViews/Regions.
#### Misc
* Allow `Application` to be initialized with multiple arguments for consistency with earlier releases.
* More comprehensive support for Backbone child views, including a more rigorous test suite and support for `render`, `destroy`, and `dom:refresh` lifecycle events when shown by CollectionViews or LayoutViews/Regions.
* Bumped Backbone dependency to 1.2.3
### v2.4.2 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v2.4.1...v2.4.2)
#### Fixes
* Fixed a bug where `reorderOnSort` would not reorder back to the original order.
* Stop deleting `$childViewContainer` so that it can be accessed in behaviors.
* Ensure `before:show` and `show` events are triggered on `CollectionView` children.
* Ensure `onBeforeAttach` and `onAttach` are called for `CollectionView` children.
* Allow for disabling of `triggerBeforeAttach` and `triggerAttach` via `show()` options.
* Added the documented `buffer` argument to `attachBuffer` and changed implementation so this was used rather than `_createBuffer`.
* Fixed potential memory leak when destroying children on `CollectionView` by making the `checkEmpty` call optional.
#### Docs
* Improve documentation around the requirement for an initial render to bind events in `CollectionView`.
* Add documentation around UI interpolation usage.
* Add documentation to warn about the full re-render of a `CollectionView` or `CompositeView` if `reorderOnSort` is not set.
#### Misc
* Bumped Underscore and Backbone dependencies to 1.8.3 and 1.2.1 respectively.
### v2.4.1 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v2.4.0...v2.4.1)
#### Fixes
* Fixed a nasty bug where `reorderOnSort` when used on a `CompositeView` would not respect the `childViewContainer`.
#### General
* Add JSCS for style linting and consistency.
#### Docs
* Improve internal linking across docs, to make it easier for people to understand how pieces relate to each other.
### v2.4.0 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v2.3.2...v2.4.0)
#### 2.4 In Overview
The Marionette 2.4 release is primarily focused around adding power and performance to `Marionette.CollectionView’s` and `CompositeViews`. It is now possible for users to declaratively sort, filter, and reorder in a performant and clear way on the view layer. Prior to this work it was difficult and required significant workarounds.
As well as working on the `CollectionView` layer we have added full support for lodash and multiple builds of backbone, underscore and lodash. Allowing the user to pick whatever tools they wish.
The other powerful feature that we introduced in this release is the concept of `childEvents` for `LayoutView` and their subviews. Prior to this release there was never a great way to listen or react to events that were triggered on subviews, like when something was rendered or destroyed. Now we have brought over the declarative `childEvents` hash from `CollectionView` into the `LayoutView`.
As always come and join us in [chat](https://gitter.im/marionettejs/backbone.marionette/)
#### Features
* CollectionView
* You can now set a filter method on a `CollectionView` or `CompositeView` to filter what views are show. This is useful for when you are displaying a list that a user can filter.
* Add the `reorderOnSort` option to `CollectionView` and `CompositeView` to use jQuery to move child nodes around without having to re-render the entire tree. This is a massive perf boost and is an easy win if you are sorting your collections.
* The `CollectionView` now has a `viewComparator`, to enable custom sorting on a per view basis regardless of what how your backing collection is sorted.
* Refactor sort param lookup to use `Marionette.getOption`.
* **Fix** childViews now fire a `before:show` event even if the childView is inserted after the parent `CollectionView` or `CompositeView` has been shown.
* Regions
* The `empty` method now takes an optional `preventDestroy` flag to prevent the destruction of the view shown within.
* `this.myRegion.empty({preventDestroy: true})`
* TemplateCache
* The templateCache `get` method now takes a second param of options to enable passing options to the loading of templates.
* LayoutView
* Add a new helper method for easier showing of child nodes `showChildView`
* `this.showChildView('sidebar', new SidebarView());`
* Add a new helper method of easier retrieving of child nodes `getChildView`
* `this.getChildView(‘sidebar’)`
* Add a `destroyImmediate` option to the `LayoutView`, to destroy the layout view element and then remove the child nodes. This is a perf optimization that you can now opt into.
* `@ui` interpolation is now supported within region definitions on a `LayoutView`
* `regionEvent` support was added
* you can access this functionality via `onChildViewX` or via the declarative `childEvents` hash
* ItemViews
* the `isRendered` property is now set to `true` after render, even if no template is set.
* Views
* The `destroy` method now returns this instance that was destroyed to enable easier chaining of view actions.
* If you define the options hash on your `Marionette.View` or if you pass options as a function to your `Marionette.View`, pass the result of options down to the backbone view constructor.
* All views now have a `isRendered` property, that is updated after `render` and `destroy`.
* Object
* The `destroy` method now returns this instance that was destroyed to enable easier chaining of object actions.
* Behavior
* The `destroy` method now returns this instance that was destroyed to enable easier chaining of behavior actions.
* Expose the `UI` hash to a behavior instance. The behavior `UI` hash is a composite of the view hash and the behavior hash merged with the behavior hash tasking precedence.
#### Util
* `Marionette._getValue` will now use `call` under the hood if no arguments are passed (micro optimization).
* Add `Marionette.mergeOptions` to `Marionette.View*` classes, `Marionette.Object`. `Marionette.AppRouter`, `Marionette.Controller`
* `mergeOptions` is a handy function to pluck certain `options` and attach them directly to an instance.
#### Docs
* Minor documentation cleanups and fixes
#### Deprecation Notices
* Deprecate `Marionette.Controller`, Use `Marionette.Object` instead.
#### Misc
* YAML api documentation is now linted on each PR.
* Add `Marionette.FEATURES` flag.
* Refactor several methods to enable 100% compatibility with lodash.
### v2.3.2 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v2.3.1...v2.3.2)
#### 2.3.2 in overview:
##### Bug Fixes
* Fix IE8 regression in `Marionette._getValue` to always call `apply` with either an array of params or an empty array.
### v2.3.1 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v2.3.0...v2.3.1)
#### 2.3.1 in overview:
##### Features
* Regions can set a `parentEl` as a way of specifying the DOM tree (default `body`) that they are scoped with. (useful for instance in `LayoutView`).
```js
var region = new Region({parentEl: $(“#sub-tree”)})
```
##### Bug Fixes
* Layout region lookups are now scoped to the layout and not to the entire DOM.
* Calling `delegateEvents` after the `ui` hash has been modified now works.
* Prevent unsetting event listeners on region swap when a view is swapped out from a region, but not destroyed, its DOM events will not be removed.
* A view's `isDestroyed` state is now explicitly set to `false` when the view is created.
##### Refactors
* Added `Marionette._getValue`. This method is similar to `_.result`. If a function is provided we call it with context otherwise just return the value. If the value is undefined return a default value. This method is private and should not be used directly in your code.
* Various other code refactors.
### v2.3.0 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v2.2.2...v2.3.0)
#### 2.3.0 in overview:
This release of Marionette contains a significant amount of code optimizations and refactors. These changes will not be visible to you as end user however as they improve the underlying base of Marionette and speed up your app to improve consistency across the base classes. Such speed ups are most visible in the great work @megawac has been doing in both [serializeData](https://github.com/marionettejs/backbone.marionette/commit/62f15dc7ec880631a0bb79b18470c94b0a0ad086) and [triggerMethod](https://github.com/marionettejs/backbone.marionette/commit/e5957dde9a9a48eeb8097a0ce2f628d795668e64)
As always you can come chat with us in the main chatroom at https://gitter.im/marionettejs/backbone.marionette/
Work has been continuing on improving the documentation of Marionette, via an external custom JSDOC tool that @ChetHarrison has been spear heading via https://github.com/ChetHarrison/jsdoccer
If you have not already checked out Marionette Inspector, it is a great tool that Jason Laster has been working on to make debugging and working with marionette much easier. https://github.com/MarionetteLabs/marionette.inspector
##### Features
* Marionette.isNodeAttached
* Determines whether the passed-in node is a child of the `document` or not.
* View "attach" / onAttach event
* Triggered anytime that showing the view in a Region causes it to be attached to the `document`. Like other Marionette events, it also executes a callback method, `onAttach`, if you've specified one.
* View "before:attach" / onBeforeAttach
* This is just like the "attach" event described above, but it's triggered right before the view is attached to the `document`.
* AppRouter Enhancements
* `triggerMethod`, `bindEntityEvents`, and `unbindEntityEvents` are now available on AppRouter
* Marionette.Application is now a subclass of Marionette.Object
* Marionette.Behavior is now a subclass of Marionette.Object
* Marionette.Region is now a subclass of Marionette.Object
* CompositeView’s `getChildViewContainer` now receives `childView` as a second argument.
* Region Triggers now pass the view, region instance, and trigger options to all handler methods
* CollectionView `emptyViewOption` method now receives the model and index as options.
* Allow non-DOM-backed regions with `allowMissingEl`
* `allowMissingEl` option is respected by `_ensureElement`
* `_ensureElement` returns a boolean, indicating whether or not element is available
* Region#show early-terminates on missing element
* Regions now ensure the view being shown is valid
* Allowing you to handle the error of a region.show without the region killing the currentView and breaking without recourse.
* Appending isDestroyed to a Backbone.View on region empty now adds the same safety for not re-showing a removed Backbone view.
* Marionette is now aliased as Mn on the `window`.
* Collection/Composite Views now support passing in 'sort' as both a class property and as an option.
* RegionManager will now auto instantiate regions that are attached to the regionManager instance.
```js
new Marionette.RegionManager({
regions: {
"aRegion": "#bar"
}
});
```
##### Fixes
* Region now uses `$.el.html(‘’)` instead of `.innerHTML` to clear contents.
* We can not use `.innerHTML` due to the fact that IE will not let us clear the html of tables and selects. We also do not want to use the more declarative `empty` method that jquery exposes since `.empty` loops over all of the children DOM nodes and unsets the listeners on each node. While this seems like a desirable thing, it comes at quite a high performance cost. For that reason we are simply clearing the html contents of the node.
* Destroying an old view kept alive by `{preventDestroy: true}` no longer empties its former region.
* Now the destroy listener from previous view is removed on region show
* AppRouter `this.options` now assigned prior to `initialize` being called.
##### Deprecation Warnings
* Marionette.Application.addInitializer
* Marionette.Application Channel
* Marionette.Application Regions
* Marionette.Callbacks
* Marionette.Deferred
* Marionette.Module.addInitializer
* Marionette.Module.addFinalizer
### v2.2.2 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v2.2.1...v2.2.2)
* Fixes
* Remove duplicate call to region.empty on view destroy.
* Fix call time of `swapOut`.
* Fix broken link in Marionette Error messages
### v2.2.1 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v2.2.0...v2.2.1)
* Fixes
* Revert collection type checking for `collectionView`.
### v2.2.0 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v2.1.0...v2.2.0)
* Features
* Normalize region selectors hash to allow a user to use the `@ui.` syntax
* `Marionette.triggerMethodOn`
* `triggerMethodOn` invokes `triggerMethod` on a specific context
* Marionette.Error
* `captureStackTrace` cleans up stack traces
* add view _behaviors reference to associated behaviors
* enabling you to easily test and spy on your behaviors
* CollectionViews now receive events from emptyViews in the childEvents hash
* Regions now receive `swapOut` and `beforeSwapOut` events.
* Application has `this.options`
* Application has `initialize` method
* Behaviors no longer wrap view methods
* Bug Fixes
* LayoutView’s regions are scoped inside its `el`
* Fix inconsistent Marionette.Object constructor implementation.
* emptyView instances now proxy their events up to the collection / compositeView
* collection / compositeView does not listen to collection add/remove/reset events until after render.
* Marionette.normalizeUIKeys no longer mutates UI hash
* Better Errors
* View destroyed error now includes the view cid in the error message.
* Throw an error when Marionette.bindEntityEvents is not an object or function
* Throw a descriptive error for `collectionViews`
* If you do not pass a valid `collectionView` instance you are now given a logical error.
* Documentation Improvements
* New API docs are in progress
* Examples have been cleaned up
### v2.2.0-pre.2 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v2.1.0...v2.2.0-pre.2)
### v2.2.0-pre [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v2.1.0...v2.2.0-pre)
### v2.1.0 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v2.0.3...v2.1.0)
* Features
* Marionette.Object
* A base class which other classes can extend from. Marionette.Object incorporates many Backbone conventions and utilities like `initialize` and `Backbone.Events`. It is a user friendly class to base your classes on to get Backbone conventions on any generic class.
* Add a `el` reference to the views `el` from within a `behavior` instance.
* `ItemView`s can now have no template by setting `template: false`
* Application objects can now configure their default message channel.
* This will allow you to configure multiple applications to exist at the same time within an app without their event bus colliding.
* Application objects now have the `getOption` method.
* Regions now have a `hasView` method to determine if there is a view within a given region.
* Views no longer use toJSON directly on models. Instead they call into the new overridable methods `serializeModel` and `serializeCollection` via `serializeData`
* Return chainable objects from more methods to be consistent
* Application: emptyRegions
* Application: removeRegion
* CollectionView renderChildView
* Controller new
* LayoutView destroy
* Region reset
* Region attachView
* Region empty
* RegionManager destroy
* RegionManager emptyRegions (now returns regions)
* RegionManager removeRegions (now returns regions)
* RegionManager removeRegion (now returns region)
* View destroy
* View undelegateEvents
* View delegateEvents
* RegionManager `addRegions` now accepts a function that returns a region definition in addition to a region definition object
* This extends to Marionette.Application’s and CompositeView’s `regions` properties
* Added CollectionView `resortView`
* Override this method on a subclass of CollectionView to provide custom logic for rendering after sorting the collection.
* View instance is now passed as a third argument to `Marionette.Renderer.render`
* Add `getRegionManager` to Application
* Fixes
* CollectionView now maintains proper order when adding a mode
* Fix component.js path
* Prevent AppRouter from erroring when appRoutes are passed into the router constructor as an option.
* UI hash keys now only allow documented syntax, enforcing `@ui.stuff` instead of `@ui<ANY_CHAR>stuff`
### v2.1.0-pre [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v2.0.3...v2.1.0-pre)
### v2.0.3 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v2.0.2...v2.0.3)
* Bug Fixes
* Fixed an issue where `before:show` was not triggered on a view's behavior when shown within a region.
* Destroying a view outside of its region will now cause the region to remove its reference to that view.
### v2.0.2 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v2.0.1...v2.0.2)
* Bug Fixes
* Fixed issue where `render:collection` called before the entire collection and children had been rendered.
* General
* Remove bundled main entry point for bower.
### v2.0.1 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v2.0.0...v2.0.1)
* Fix missing Wreqr and Babysitter in Core AMD definition.
### v2.0.0 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v1.8.8...v2.0.0)
* This is a breaking release and contains many API updates and changes, thus changelog is quite large for this release, please refer to the [google doc](https://docs.google.com/document/d/1fuXb9N5LwmdPn-teMwAo3c8JTx6ifUowbqFY1NNSdp8/edit#) for the full details of what is new and what has changed.
### v2.0.0-pre.2 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v2.0.0-pre.1...v2.0.0-pre.2)
* The changelog is quite large for this release, please refer to the [google doc](https://docs.google.com/document/d/1fuXb9N5LwmdPn-teMwAo3c8JTx6ifUowbqFY1NNSdp8/edit#)
### v2.0.0-pre.1 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v1.8.5...v2.0.0-pre.1)
* The changelog is quite large for this release, please refer to the [google doc](https://docs.google.com/document/d/1fuXb9N5LwmdPn-teMwAo3c8JTx6ifUowbqFY1NNSdp8/edit#)
### v1.8.8 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v1.8.7...v1.8.8)
* Fixes
* Fixed the case where `onShow` was not called on child view behaviors when inside a `Collection` or `Composite` view.
### v1.8.7 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v1.8.6...v1.8.7)
* Fixes
* Fixed nasty ui interpolation bug with behaviors.
* General
* Minor Doc cleanup
### v1.8.6 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v1.8.5...v1.8.6)
* Regions
* `Region.show` now returns the region instance to allow for region operation chaining.
* `Region.show` triggers the view's native `triggerMethod` if it exists. This is to handle the case that triggerMethod is wrapped by a `Marionette.Behavior`.
* General
* Update jquery 2.x upper bound dependency restrictions.
* The grunt test command will now complain if you do not have bower components installed.
* Readme cleanups.
### v1.8.5 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v1.8.4...v1.8.5)
* Fixes
* Update the UMD build to be inline with the 2.x branch UMD implementation.
### v1.8.4 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v1.8.3...v1.8.4)
* General
* Update bundled build to use the latest version of babysitter and wreqr.
### v1.8.3 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v1.8.2...v1.8.3)
* Fixes
* Behaviors now have access to the views options and events during their initialize.
### v1.8.2 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v1.8.0...v1.8.2)
* Fixes
* Behaviors now calls `stopListening` on close.
* Behaviors now undelegate `modelEvents` and `collectionEvents` when the parent view calls `undelegateEvents`.
### v1.8.0 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v1.7.4...v1.8.0)
* General
* Update Gruntfile.
* The default task (`grunt`) now runs tests.
* `$ grunt dev` watch for watching.
* `$ grunt build` runs the tests and compiles.
* Add better inline documentation for module implementation.
* Add better inline behavior documentation.
* Fixes
* Behaviors now correctly lookup methods for `modelEvents` and `collectionEvents`.
* The `CollectionView` now triggers close on its children in the correct order.
* Features
* Add `onRoute` to the `appRouter`.
```js
Marionette.AppRouter.extend({
onRoute: function(route, params) {
}
})
```
* `Region.show` now takes an option to prevent closing the previous view in the region. By default a region will automatically close the previous view, however you can prevent this behavior by passing `{preventDestroy: true}` in the options parameter.
```js
myRegion.show(view2, { preventDestroy: true })
```
* Add a `getRegion` method to `Layout`. This is in line with the eventual goal of not attaching regions to the root layout object.
* Behavior instances now extend from Backbone.Events, allowing you to use `.listenTo` and `.on`.
* Allow Behaviors to have a functional hash lookup.
```js
Marionette.ItemView.extend({
behaviors: function() {
// “this” will refer to the view instance
return : {
BehaviorA: {}
}
}
})
```
* RegionManagers now calls `stopListening` on a regions on removal.
* Refactors
* Abstract underscore collection method mixin into a generic helper.
* Use built in marionette extend for behaviors.
* Tests
* Add a whitespace linter to the text coverage. Trailing whitespace now causes travis.ci to fail.
* Add test coverage for `bindEntitiyEvents` and `unbindEntityEvents`.
* Test public API for the `regionManager`.
* Improve view trigger tests for better control when testing.
### v1.7.4 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v1.7.3...v1.7.4)
* General
* Update bower dependencies to take advantage of the fact that marionette repos follow semver.
* Fixes
* Behaviors events no longer collide with each other.
* Revert `stopListening` call on `stop` for modules. While this was a "fix", the docs were quite vague leading to breaking changes for many people.
* `startWithParent` is now respected when using a `moduleClass` property.
### v1.7.3 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v1.7.2...v1.7.3)
* Behaviors
* Adds the ability to use `@ui` interpolation within the events hash on a behavior.
* Fixes
* Corrects broken view $el proxy in behaviors.
### v1.7.2 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v1.7.1...v1.7.2)
* Fixes
* Binds behavior events to the behavior instance, as compared to the view.
### v1.7.1 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v1.7...v1.7.1)
* Fixes
* Enables the use of string based behavior event methods.
### v1.7.0 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v1.6.4...v1.7)
Version 1.7 represents a significant step in formalizing the ways to improve your `view` code though reusable `behaviors`. Say goodbye to custom mixin strategies and welcome `behaviors` into town.
* Behaviors
A `Behavior` is an isolated set of DOM / user interactions that can be mixed into any `View`. `Behaviors` allow you to blackbox `View` specific interactions into portable logical chunks, keeping your `views` simple and your code DRY. **[Read the docs here.](https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.behavior.md)**
* Modules
* Call stop listening on module stop.
* Events
* add a before:show event for views and regions
* Docs
* Entire refactor of application docs.
* Tests
* Rework the module tests to improve readability and consistency.
* General
* switch from `~` to `^` for *trusted* dependencies.
### v1.6.4 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v1.6.3...v1.6.4)
* Fixes
* Patches a bug that would cause modules to be initialized twice when a custom module class is passed
### v1.6.3 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v1.6.2...v1.6.3)
* Improvements
* Enable more direct module instantiation on `Marionette.App`.
```js
var ItemModule = Marionette.Module.extend({
startWithParent: false,
initialize: function(options) {},
onStart: function() {}
});
// ...
this.app.module('Items', ItemModule);
```
* `ui` hash interpolation now supports a functional `ui` hash.
```js
ui: function() {
return {
"foo": ".foo"
}
}
```
* Fixes
* Fix `@ui` interpolation for handling complex selectors.
```js
{
"click div:not(@ui.bar)": "tapper"
}
```
* Bump `backbone.babysitter` and `backbone.wreqr` versions.
* General
* Improve readme docs for `CollectionView`, `AppRouter` and `ItemView`.
* Handle THE [npm self sign cert problem](http://blog.npmjs.org/post/78085451721/npms-self-signed-certificate-is-no-more)
* Replace unneeded argument slicing.
* Normalize error throwing to use internal `throwError` helper method.
* Use `_` type checks for non performant code to improve readability and consistency.
### v1.6.2 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v1.6.1...v1.6.2)
* CollectionView/CompositeView
* allow `itemEvents` to use string based method names [PR 875](https://github.com/marionettejs/backbone.marionette/pull/875)
* Modules
* update module initialize to include moduleName and app [PR 898](https://github.com/marionettejs/backbone.marionette/pull/898)
* General
* significantly improve module documentation [PR 897](https://github.com/marionettejs/backbone.marionette/pull/897)
### v1.6.1 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v1.6.0...v1.6.1)
* Modules
* Fix a bug where a module would not start by default when defined as an object literal
### v1.6.0 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v1.5.1...v1.6.0)
* CompositeView
* add a `composite:collection:before:render` event
* CollectionView
* `checkEmpty` can now be overridden
* Modules
* `Modules` can now be created using the extend method, and then attached to an [Application](https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.application.module.md#extending-modules).
* General
* add a component.json file
* update bower.json
* add AMD build in bower.json
* Tests
* general clean up
* add sinon.js for test spys
### v1.5.1 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v1.5.0...v1.5.1)
* CollectionView/CompositeView
* Fix bug where `show` and `onDomRefresh` was not called on `itemViews` in certain [conditions](https://github.com/marionettejs/backbone.marionette/pull/866)
### v1.5.0 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v1.4.1...v1.5.0)
* Views
* View `options` can now be a [function](https://github.com/marionettejs/backbone.marionette/pull/819)
* `onDomRefresh` is now only called when said `view` is in the [DOM](https://github.com/marionettejs/backbone.marionette/pull/855)
* CollectionView/CompositeView
* `itemViewContainer` is now called with the correct [context](https://github.com/marionettejs/backbone.marionette/pull/841)
* Fix bug where reseting a `collection` within a `collectionView` would cause `onShow` and `onDomRefresh` to be called [incorrectly](https://github.com/marionettejs/backbone.marionette/pull/849) on the itemViews.
* `addItemView` now returns the `view` that was [added](https://github.com/marionettejs/backbone.marionette/pull/851)
* You can now specify an `itemEvents` hash or method which allows you to capture all bubbling itemEvents without having to [manually set bindings](https://github.com/marionettejs/backbone.marionette/pull/861).
```js
itemEvents: {
"render": function() {
console.log("an itemView has been rendered");
}
}
```
* Regions
* Region `close` event now passes the `view` being closed with the [event](https://github.com/marionettejs/backbone.marionette/pull/834).
* General
* Updated bower ignore folder
* Added an editor config file
### v1.4.1 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v1.4.0...v1.4.1)
* Views
* fix for inital view class options. Now retains set options at class instantiation
### v1.4.0 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v1.3.0...v1.4.0)
* Views
* adds the ability to use the new ```@ui.``` syntax within the events and triggers hash to prevent selector duplication
### v1.3.0 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v1.2.3...v1.3.0)
* CompositeView / CollectionView
* Massive perf boost in rendering collection and composite views by using document fragments [jsPerf](http://jsperf.com/marionette-documentfragment-collectionview/5)
### v1.2.3 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v1.2.2...v1.2.3)
* CompositeView
* Fixed bug where ```child views``` were being added before the initial render, thus raising errors.
### v1.2.2 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v1.2.1...v1.2.2)
* Views
* Move the instantiation of ```view``` options above the ```constructor``` This allows for view options to be accessed from within the ```initialize``` method for a given ```view```
This is needed since backbone views no longer set the view options in the constructor
### v1.2.1 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v1.2.0...v1.2.1)
* Views
* fixed a bug so now view options are {} by default and not undefined.
* fixed a bug where the triggers preventDefault and stopPropagation were executing in the wrong context – triggers now prevent default and stop propagation by default once more.
### v1.2.0 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v1.1.0...v1.2.0)
* Update Backbone to [1.1.0](https://github.com/jashkenas/backbone/compare/1.0.0...1.1.0)
* Views
* added the ability to customize the behavior of `triggers` preventDefault and stopPropagation
* Collection View / CompositeView
* added the ability to specifiy `getEmptyView` for dynamic `emptyView` lookups
### v1.1 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v1.0.4...v1.1.0)
* Marionette.View / All Views
* Fix for `ui` bindings to not be removed from view prototype, if unrendered view is closed
* Template helpers can now be provided as a constructor function option
* Layout
* Will properly attach regions if the layout's `close` method was called prior to `render`
* Calling `.addRegions` will correctly modify the layout instance' region list instead of the prototype's
* Fixed bug that prevented default `regionType` from being used
* CompositeView
* The `itemViewContainer` can be supplied in the constructor function options
* Application
* Added `closeRegions` method to close all regions on the app instance
* Added `getRegion` method to retrieve a region by name
* AppRouter
* Added `appRoute` method to create app router handlers at runtime
* Added ability to set `appRoutes` in constructor function options
* Marionette.triggerMethod
* Calls to the `Marionette.triggerMethod` can be made on objects that do not have a `trigger` method
### v1.0.4 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v1.0.3...v1.0.4)
* ItemView
* Added needed `constructor` function back - it added lots of things and needed to be there
* CompositeView
* Added explicit call to CollectionView constructor to allow for inheritance overriding
* Layout
* Small clarification for consistency on call to ItemView constructor
### v1.0.3 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v1.0.2...v1.0.3)
* ItemView
* Deleted unneeded `constructor` function - it added nothing and didn't need to be there
* CompositeView
* Added `index` parameter to method signature, to show that it is available
* Deleted unneeded `constructor` function and removed call to `getItemView` as it was causing problems and was not needed in the constructor.
* All Views
* Fixed a bug in the entity and collection event bindings, where `stopListening` would not unbind the event handlers
* Renderer / All Views
* The `Renderer.render` method will throw a more meaningful error if the supplied template is falsey
* Region
* Re-showing a closed view now works by re-rendering and re-inserting the view in to the DOM
* Region will trigger a `show` event when showing a view (updated the code to work like the docs already said)
* Set the `currentView` before triggering the `show` events from the region / view
* RegionManager
* Fixed a bug to decrement the `.length` when a region is removed
### v1.0.2 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v1.0.1...v1.0.2)
* UI Elements
* Fix bug to unbind them after the "close" event / `onClose` method, so the `ui` elements are available during these
* AppRouter
* Fix bug that was reversing the order of routes, causing the wrong route to be fired in many cases
### v1.0.1 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v1.0.0...v1.0.1)
* AMD build: Removed `require('jQuery')` as Marionette now pulled `Backbone.$` as
`Marionette.$`.
* Fixed RegionManager to allow region types to be specified again, not just
region instances.
* NPM: Removed hard dependency on jQuery from the dependency list. This will
be pulled in by other libs, or should be pulled in manually, to get the
right version.
### v1.0.0 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v1.0.0-rc6...v1.0.0)
* RegionManager
* Created new `Marionette.RegionManager` object to manage a set of regions
* Region
* Region will call the `close` method on a view, or the `remove` method if `close` is not found, when closing a view
* When calling the `show` method with the same view instance multiple times, subsequent calls will only re-render the view and not close / re-open it
* Application
* Now uses `Marionette.RegionManager` to manage regions
* Layout
* Now uses `Marionette.RegionManager` to manage regions
* Now supports dynamic add / remove of regions
* Can specify `regions` as a function that takes an `options` argument (the view's constructor options)
* CollectionView / CompositeView
* When specifying `itemViewOptions` as a function, an item `index` argument will be passed as the second parameter
* Will call the `close` or `remove` method when closing a view, with `close` method taking precedence
* CompositeView
* Fixed a bug that caused an error when the collection was `reset` (loaded) before the view was rendered
* All Views
* Closing a view will properly unbind `ui` elements
* Closing and then re-rendering a view will re-bind the `ui` elements
* Functions
* Removed the `Marionette.createObject` function - it was never used by Marionette, directly
* jQuery
* Replaced direct calls to `$` with new `Marionette.$`, which is assigned to
`Backbone.$` for consistency w/ Backbone.
* Backbone.Wreqr
* Updated to v0.2.0
* Renamed `addHandler` method to `setHandler`
* For more information, see the [Wreqr changelog](https://github.com/marionettejs/backbone.wreqr/blob/master/CHANGELOG.md)
* Code Cleanup
* Replaced `that = this` with the `context` param of several calls to `_.each` to clean up the code
* Removed an unused method from the CompositeView implementation
* Build process
* Updated to Grunt v0.4.x
* Added code coverage and other analysis reports
### v1.0.0-rc6 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v1.0.0-rc5...v1.0.0-rc6)
* CompositeView
* Corrected the timing of the "before:render" event / `onBeforeRender` callback, so that it will be called before serializing the data for the model / template
### v1.0.0-rc5 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v1.0.0-rc4...v1.0.0-rc5)
* CollectionView / ItemView
* Corrected the timing on the "show" event / `onShow` callback for itemView instances that are added after the CollectionView is in the DOM
### v1.0.0-rc4 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v1.0.0-rc3...v1.0.0-rc4)
* EventBinder
* **BREAKING:** Removed `Marionette.addEventBinder` function.
* EventAggregator
* **BREAKING:** Removed `Marionette.EventAggregator` object. Use `Backbone.Wreqr.EventAggregator` instead
* CollectionView / CompositeView
* Fixed several issues related to resetting the collection, and producing zombie "empty" views
* Fixed a bug that caused multiple emptyView instances when resetting the collection
* Forwarded events from child views are now called with `triggerMethod`, meaning they trigger the event and call the corresponding "onEventName" method
* Modules
* Finalizers now run with the module as the `this` context
* Marionette.getOption
* Fixed support for "falsey" values in an object's `options`
* Build process
* Fixed build process to work on case-sensitive file systems (Linux, for example)
### v1.0.0-rc3 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v1.0.0-rc2...v1.0.0-rc3)
* Updated Backbone v0.9.10
* Updated jQuery to v1.9.0
* Fixed a few minor unit test issues w/ jQuery update
* Read [the upgrade guide](https://github.com/marionettejs/backbone.marionette/blob/master/upgradeGuide.md) for upgrading from v1.0.0-rc2 to v1.0.0-rc3
### v1.0.0-rc3 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v1.0.0-rc2...v1.0.0-rc3)
* **IMPORTANT:** Be sure to read [the upgrade guide](https://github.com/marionettejs/backbone.marionette/blob/master/upgradeGuide.md) for upgrading from v1.0.0-rc2 to v1.0.0-rc3
* Backbone v0.9.9
* **BREAKING:** Backbone v0.9.2 is no longer supported
* Backbone v0.9.9 is now supported
* Marionette.Async
* **BREAKING:** Marionette.Async is no longer supported
* Backbone.EventBinder / Marionette.EventBinder
* **BREAKING:** Marionette.EventBinder / Backbone.EventBinder have been removed entirely.
* Backbone.Events supercedes the older objects
* Backbone.Wreqr.EventAggregator also supercedes Marionette.EventBinder
* EventBinder -> EventAggregator
* **BREAKING:** Backbone.Werqr.EventAggregator largely replaces Backbone.EventBinder
* **BREAKING:** `bindTo` has been replaced with `listenTo`
* **BREAKING:** `unbindAll` has been replaced with `stopListening`
* **BREAKING:** `unbindFrom` has been removed and will not be replaced
* Marionette.addEventBinder
* **BREAKING:** This function will mix in Backbone.Events to the target object if it does not exist
* **BREAKING:** This function will alter the `listenTo` method of the target to accept a `context` parameter as the 4th parameter of the method
* All Views, Controller, etc
* **BREAKING:** Backbone.EventBinder is no longer mixed in
* **BREAKING:** See 'EventBinder -> EventAggregator' changes regarding method names to use for binding / unbinding events
* CollectionView
* Added `removeChildView` to remove a specific view instance
* Fixed event handler leak for child views that have been removed
* Changed the implementation for triggering the "show" event / "onShow" method call, to avoid memory leaks
* Fixed the `index` parameter for adding a model to the collection, and getting the view in to the right place
* All Views
* **BREAKING:** The `initialEvents` method has been removed. Use the `initialize` method, the `collectionEvents` or `modelEvents` configuration instead.
* Allow `modelEvents` and `collectionEvents` to be a function that returns a hash
* Allow `ui` configuration to be a function that returns a hash
* `modelEvents` and `collectionEvents` are now delegated / undelegated with Backbone.View's `.delegateEvents` and `.undelegateEvents` method calls
* View `triggers` now include an `args` object with `args.view`, `args.model` and `args.collection`
* Modules
* Added alternate syntax for specifying `startWithParent` option
* Fixed a bug where a module would not be started without an explicit definition for that module (#388 & #400)
### v1.0.0-rc2 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v1.0.0-rc1...v1.0.0-rc2)
* CollectionView / CompositeView
* **BREAKING: ** Changed the `item:added` event to `before:item:added` and `after:item:added`
* Fixed the `onShow` callbacks, so they can be used in the `initialize` method
* AMD build
* Fixed the AMD build by adding Backbone.BabySitter to the AMD dependency list
* All Views
* All views (include Marionette.View) now have a "dom:refresh" and `onDomRefresh` event / method triggered
### v1.0.0-rc1 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v1.0.0-beta6...v1.0.0-rc1)
* Fixed IE < 9 support w/ calls to `.apply` when `arguments` was null or undefined
* Module
* **BREAKING:** Renamed "initialize:before" event to "before:start", for consistency
* **BREAKING:** Renamed "initialize:after" event to "start", for consistency
* Triggers a "before:stop" event/method before the module is stopped
* Triggers a "stop" event/method after the module has been stopped
* Marionette.View
* **BREAKING**: The `bindBackboneEntityTo` method has been removed from Marionette.View and replaced with `Marionette.bindEntityEvents` function.
* Marionette.bindEntityEvents
* This function has been extracted from Marionette.View, and will bind an events hash to the events from an entity (model or collection), using the supplied EventBinder object (or any object with a bindTo method)
* Marionette.EventBinder
* The context of the callback method defaults to the object w/ the `bindTo` method
* CollectionView / CompositeView
* The "item:added"/`onItemAdded` callback method are now fired after an item view has been rendered and added to it's parent collection view
* The "itemview:" events - events that are forwarded from item views - can now have a custom prefix with the `itemViewEventPrefix` setting
* ItemView
* Added a "dom:refresh" event/callback method that fires after a view has been rendered, placed in the DOM with a Marionette.Region, and is re-rendered
* All Views
* The `modelEvents` and `collectionEvents` can now have a function configured as the value in the `{ "event:name": "value" }` configuration hash
* A view that uses `bindTo` for its own "close" event will have it's close handler called correctly
* Returning `false` from the `onBeforeClose` method will prevent the view from being closed
### v1.0.0-beta6 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v1.0.0-beta5...v1.0.0-beta6)
* CollectionView / CompositeView
* **BREAKING:** The `.children` attribute, used to store child views, is no longer an object literal. It is now an instance of `Backbone.ChildViewContainer` from Backbone.BabySitter
* Updated to use [Backbone.BabySitter](https://github.com/marionettejs/backbone.babysitter) to store and manage child views
* Controller
* Added a default `close` method to unbind all events on the controller instance and controller event binder
* Trigger a "close"/onClose event/method when closing
* Fixed initialize method so `options` parameter is always a valid object
* Modules
* Fixed an issue with grand-child modules being defined with a non-existent direct parent, and starting the top level parent directly
### v1.0.0-beta5 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v1.0.0-beta4...v1.0.0-beta5)
* Modules
* Fixed the `startWithParent` option so that you only have to specify `startWithParent: false` once, no matter how many files the module definition is split in to
### v1.0.0-beta4 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v1.0.0-beta3...v1.0.0-beta4)
* CollectionView / CompositeView
* **BREAKING:** Changed when the `itemViewOptions` gets called, in order to simplify the `buildItemView` method and make it easier to override
* **BREAKING:** The `storeChild` method now requires an instance of the item being rendered, as well as the view that was rendered for it
* CompositeView / templateHelpers
* **BREAKING:** Fixed the `CompositeView` so that `serializeData` is no longer responsible for mixing in the `templateHelpers`
* Controller
* Added a very basic `Marionette.Controller` object, and basic documentation for it
* Marionette.getOption
* Added a convience method to get an object's options either from the object directly, or from it's `this.options`, with `this.options` taking precedence
* Converted use of `this.options` to use `Marionette.getOption` through most of the code
* Marionette.createObject
* Added a convience method to create an object that inherits from another, as a wrapper / shim around `Object.create`
### v1.0.0-beta3 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v1.0.0-beta2...v1.0.0-beta3)
* Region
* Fixed "show" method so that it includes the view instance being shown, again
### v1.0.0-beta2 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v1.0.0-beta1...v1.0.0-beta2)
* templateHelpers
* **BREAKING:** Changed when the templateHelpers is mixed in to the data for a view, so that it is no longer dependent on the `serializeData` implementation
* Region
* **BREAKING:** Changed "view:show" event to "show"
* **BREAKING:** Changed "view:closed" event to "close"
* All region events and events that the triggers from a view are now triggered via Marionette.triggerMethod.
* Marionette.EventAggregator
* **BREAKING:** The `bindTo` method no longer assumes you are binding to the EventAggregator instance. You must specify the object that is triggering the event: `ea.bindto(ea, "event", callback, context)`
* Marionette.EventAggregator combines Backbone.Wreqr.EventAggregator with Backbone.EventBinder, allowing the event aggregator to act as it's own event binder
* CollectionView
* Fixed bug where adding an item to a collection would not allow the CollectionView to propagate the itemView's events
* Allow `itemViewOptions` to be specified in CollectionView constructor options
* Application
* The events triggered from the Application object instance are now triggered with corresponding "on{EventName}" method calls
* Backbone.EventBinder
* Updated to v0.1.0 of Backbone.EventBinder, allowing for jQuery/DOM events to be handled within the EventBinder instances / `bindTo` methods
* AMD Wrapper
* The "core" AMD wrapper specifies Backbone.Wreqr and Backbone.EventBinder
* The "standard" AMD wrapper does not specify Backbone.Wreqr / EventBinder, as these are built in
* Build / downloads
* The standard and AMD versions of `backbone.marionette.js` and `backbone.marionette.min.js` include all dependencies (EventBinder, Wreqr)
* The "core" versions of `backbone.marionette.js` and `backbone.marionette.min.js` do not include any dependencies (EventBinder, Wreqr)
### v1.0.0-beta1 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v0.10.2...v1.0.0-beta1)
* Backbone.EventBinder
* **BREAKING:** Marionette's EventBinder has been extracted to the Backbone.EventBinder repository and plugin. You must include this file in your app, available at https://github.com/marionettejs/backbone.eventbinder
* Backbone.Wreqr
* **BREAKING:** Marionette's EventAggregator has been extracted to the Backbone.Wreqr repository and plugin. You must include this file in your app, available at https://github.com/marionettejs/backbone.wreqr
* All Views
* **BREAKING:** `beforeRender` method is now `onBeforeRender`
* **BREAKING:** `beforeClose` method is now `onBeforeClose`
* **BREAKING:** The `render` method for all Marionette views is bound to the view instance
* All view events are now triggered with `triggerMethod`, calling their corresponding method on the view if it exists
* All views now have an `isClosed` attribute on them, which is set to `true` when calling the `close()` method and reset to `false` when calling the `render()` method
* EventBinder is now attached to the views with the `Marionette.addEventBinder` method call
* CompositeView
* **BREAKING:** CompositeView will only render a model in to it's template, instead of a model or collection. It will still render the collection as itemView instances.
* Modules
* **BREAKING:** Split module definitions can now receive custom args per module definition, instead of sharing / replacing them across all definitions
* CollectionView / CompositeView
* Cleaned up the `getItemViewContainer` code, and improved the error that is thrown when the specified container element is not found
* Can attach existing view instance w/ existing DOM element as child of collection view / composite view, in parent's `initialize` function
* Fixed a bug where an undefined `this.options` would prevent child views from being rendered, trying to find the index of the view
* Layout
* Allow a Layout to be defined without `regions`, using Underscore v1.4.x
* View / ItemView / CompositeView
* Removed the `serializeData` method and added directly to `ItemView` and `CompositeView` as needed
* Application
* Application regions can now be specified as a jQuery selector string, a region type, or an object literal with a selector and type: `{selector: "#foo", regionType: MyCustomRegion}`
* added `.commands` as instance of Backbone.Wreqr.Commands, to facilitate command execution
* added `.execute` method for direct command execution
* added `.reqres` as instance of Backbone.Wreqr.RequestResponse, to facilitate request/response execution
* added `.request` method for direct requesting of a response
* Marionette.triggerMethod
* Added `Marionette.triggerMethod` method to trigger an event and call the corresponding method. For example, `view.triggetMethod("before:render")` will trigger the "before:render" event and call the `onBeforeRender` method.
* Marionette.addEventBinder
* Added `Marionette.addEventBinder` method to add all of the Backbone.Wreqr.EventBinder methods to a specified target object
* Misc
* Added `Marionette.extend` as alias to Backbone's `extend` method for more consistent use
* jQuery ($) support now works from global `$` or `window.jQuery`
* Updated to Underscore.js v1.4.1
* Updated to jQuery v1.8.2
### v0.10.2 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v0.10.1...v0.10.2)
* Callbacks
* Fixed a bug that caused callbacks to fire multiple times after calling `reset`
* Layout
* Fixed a bug that prevented the regions from being re-initialized correctly, when using `render` as a callback method for an event
### v0.10.1 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v0.10.0...v0.10.1)
* Modules
* Fixed a bug when defining modules in reverse order, that prevented `startWithParent` from working correctly
### v0.10.0 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v0.9.13...v0.10.0)
* Modules
* **BREAKING:** Module definition functions are executed immediately and only once, not every time you call `start`
* **BREAKING:** Renamed `startWithApp` to `startWithParent` in module definitions
* **BREAKING:** Sub-modules rely on the parent module to start them, by default, but can be started manually
* **BREAKING:** Sub-modules default to starting with their parent module start
* **BREAKING:** Specifying `startWithParent: false` for a sub-module will prevent the module from being started when the parent starts
* **BREAKING:** Specifying `startWithParent: false` for a top-level module will prevent the module from being started when the parent `Application` starts
* **BREAKING:** When starting a module, sub-modules will be started / initialized before parent modules (depth-first hierarchy traversal)
* **BREAKING:** When stopping a module, sub-modules will be stopped / finalized before parent modules (depth-first hierarchy traversal)
* Fixed: retrieving a module by name (`var foo = MyApp.module("Foo");`) will not change the module's definition or `startWithParent` setting
* CollectionView
* Allow `itemViewOptions` to be a function, which recieves the `item` as an argument
* Callbacks
* Added `reset` method to reset the list of callbacks and allow them to be run again, when needed
### v0.9.13 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v0.9.12...v0.9.13)
* CollectionView
* Fixed bug that prevented "collection:closed" event from being triggered
* Allow different item view to be rendered for each item in collection by overriding `getItemView` method
* CompositeView
* Allow different item view to be rendered for each item in collection by overriding `getItemView` method
* Layout
* Regions are initialized before prototype constructor, or `initialize` function are called
* All Views
* Adds declarative event binding for models and collections. See [Marionette.View documentation](https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.view.md) for more information.
* Build and test
* Removed all dependencies on Ruby, in favor of NodeJS and Grunt
### v0.9.12 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v0.9.11...v0.9.12)
* Moved [Marionette.Async](https://github.com/marionettejs/backbone.marionette.async) to it's own repository
* De-linted source code
* Corrected throwing an "Exception" to throwing an "Error"
### v0.9.11 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v0.9.10...v0.9.11)
* JamJS Support
* Updated the `package.json` file with more detail and support for [JamJS](http://jamjs.org/).
* Layout
* Fixed a global variable leak
### v0.9.10 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v0.9.9...v0.9.10)
* ItemView and Layout
* **BREAKING:** Removed the default implementation of `initialEvents`, so that a collection "reset" event won't cause the ItemView or Layout to re-render
* Build Process
* Changed from Anvil.js to Grunt.js for the build process
### v0.9.9 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v0.9.8...v0.9.9)
* Regions
* Added a `reset` method to regions, which closes the open view and deletes the region's cached `el`
### v0.9.8 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v0.9.7...v0.9.8)
* Modules
* Fixed a bug that ensures modules will start and stop the correct number of times, instead of always stopping immediately after they have been stopped once
### v0.9.7 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v0.9.6...v0.9.7)
* Modules
* Fixed a bug to ensure modules are only started once, no matter how many definitions the module is split in to
* View Templates
* Better support for pre-compiled templates - can specify a function as the `template` setting for a view, and the function will be run as the template, directly.
### v0.9.6 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v0.9.5...v0.9.6)
* All Marionette Views
* Fixed bug that prevented `bindTo` function and other `EventBinder` functions from being available in `initialize` method of views
### v0.9.5 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v0.9.4...v0.9.5)
* Layout
* Fixed a typo / bug in default Region type used for layouts
### v0.9.4 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v0.9.3...v0.9.5)
* BindTo -> EventBindings
* **BREAKING:** Renamed `Marionette.BindTo` to `Marionette.EventBindings` and made it a constructor function instead of an object literal
* Modules
* **BREAKING:** Changed the API of `Module.create` to be more clear and explicit about `app` parameter
* **BREAKING:** Defer module definition until module is started
* Modules now have `addInitializer` method to add initializers
* Modules can be started (run the initializers) with `start` method
* Modules are automatically started when Marionette.Application `start` method is called
* App.start sends options to module initializers
* Modules that are defined (or loaded from external source) afer app is started will auto-start by default
* Can specify a module is not started with the app, to prevent the module from being started when app.start is called
* Calling `start` on a module will start all of the sub-modules for that module
* CollectionView/CompositeView
* Correctly handles non-existent collection and removing child item views that were added manually
* Corrected showing empty view and closing empty view when resetting collection and adding items
* Fixed bug to prevent showing the empty view more than once when rendering the collection view
* Application
* Added a `removeRegion` method to close / remove regions, as a counter-function to the `addRegions` method
* Marionette.View (all views / base view)
* Can specify a set of `ui` elements that are cached jQuery selectors
* Layout
* An already closed layout can be re-rendered, and the regions will regenerate
* Allow a custom region type to be specified for all regions, as well as per-region instance
### v0.9.3 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v0.9.2...v0.9.3)
* CompositeView
* Cleaned up the method to get / cache the `itemViewContainer`
* Allow `itemViewContainer` to be a function that return a jQuery selector string
* View `render` methods all return `this` in the standard Marionette views (the async views still return a deferred object).
### v0.9.2 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v0.9.1...v0.9.2)
* CompositeView
* Added `itemViewContainer` to specify which element children / itemView instances should be appended to
* CollectionView
* Now triggers "before:render" and "render" events
* Region
* Returns a deferred/promise from the `show` method, with Marionette.Async
* Fixed bug in template cache for Marionette.Async
* Marionette can now be installed with [Volo](https://github.com/volojs/volo)
### v0.9.1 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v0.9.0...v0.9.1)
* CollectionView and CompositeView properly close their `emptyView` instance when an item is added to the view's collection
* CollectionView and CompositeView will show their `emptyView` after the last item has been removed from the collection
### v0.9.0 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v0.8.4...v0.9.0)
* **BREAKING** Async Support Removed From Core Marionette
* Marionette no longer supports asynchronous / deferred rendering in any view, by default
* Async / deferred rendering are now provided via `backbone.marionette.async.js` add-on
* Split the single src/backbone.marionette.js file into multiple files for easier maintenance
* Marionette.Async:
* Added `Marionette.Async` add-on which provides support for rendering and retrieving templates asynchronously
* Marionette.View:
* **BREAKING** Renamed the `getTemplateSelector` method to `getTemplate`
* Call `unbindAll` to unbind all bound events, later in the close process, so the `close` event can be listened to
* ItemView:
* **BREAKING** The `template` attribute no longer allows you to specify a function that returns a jQuery selector. Override `getTemplate` to do this.
* **BREAKING** The `renderHtml` method has been removed from the ItemView
* **BREAKING** Async support removed
* CollectionView:
* **BREAKING** Async support removed
* Now supports optional `emptyView` attribute, to specify what view to render when no items exist in the collection
* Fixed a memory leak for closed item views
* ItemView is now guaranteed to have it's "onRender" and "onShow" methods called, when rendering the collection and when adding a new item to the collection / rendering the new item view
* Calls an `onItemAdded` method when adding an item/item view, just prior to rendering the item view
* Can now specify an `itemViewOptions` object literal on your collection view definition, and the data will be passed to each itemView instance as part of the itemView's options
* The `appendHtml` method receives a third argument of the itemView's "index" for sorted collections
* CompositeView:
* **BREAKING** When a CompositeView's collection is reset, only the collection will be re-rendered. It will no longe re-render the composite's template/model, just the collection.
* **BREAKING** Async support removed
* (see change list for `CollectionView`)
* Layout:
* **BREAKING** Regions specified within a layout are now available immediately after creating a layout instance
* **BREAKING** Re-rendering a layout will close all regions and reset them to the new DOM elements that were rendered
* **BREAKING** Layouts no longer have a `.vent` event aggregator hanging off them
* **BREAKING** Async support removed
* Region:
* **BREAKING** Removed the ability to send a second parameter to a regions' "show" method
* **BREAKING** Changed the implementation of `Region` to allow easier overriding of how the new view is added to the DOM
* **BREAKING** Async support removed
* TemplateCache:
* **BREAKING** Moved TemplateCache to object instances instead of single object literal
* **BREAKING** Moved the `loadTemplate` and `compileTemplate` to `TemplateCache.prototype`
* **BREAKING** `TemplateCache.get` no longer accepts a callback method. It always returns jQuery promise
* Renderer:
* **BREAKING** Removed the `renderHtml` method
* Rendering a pre-compiled template function is now much easier - just override the `Renderer.render` method.
* Modules:
* **BREAKING** Modules must be defined on an instance of a Marionette.Application, and cannot be defined from another module directly
* **BREAKING** Modules no longer allow you to return a custom module object from the module definition function
* **BREAKING** Modules no longer allow you to add initializers to them
* **BREAKING** Modules no longer have a `.vent` event aggregator hanging off them
* Extracted `Marionette.Module` in to it's own constructor function to be used as modules, instead of Marionette.Application
* Modules allow you to pass in any arbirary arguments, after the module definition function, and they will be supplied to the module definition function
* The `this` argument in a module definition function is now the module itself
* Callbacks:
* **BREAKING** Switched the order of parameters for the `run` method to `args, context`
* BindTo:
* The unbinding of an event now considers the `context` parameter when unbinding, allowing multiple handers to be bound to the same event from the same object, and unbinding only one of them
### v0.8.4 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v0.8.3...v0.8.4)
* Fixed: A call to `.module` will correctly pass the `Application` instance from which `.module` was called, as the second parameter of the module definition function
### v0.8.3 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v0.8.2...v0.8.3)
* Module definitions can be split across multiple files and/or multiple calls to define the module
### v0.8.2 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v0.8.1...v0.8.2)
* Views now have the ability to define `triggers` which will convert a DOM event in to a `view.trigger` event
### v0.8.1 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v0.8.0...v0.8.1)
* Module definition functions will only be applied to the last module in the . chain
### v0.8.0 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v0.7.6...v0.8.0)
* Added modules and sub-modules through the Application object
### v0.7.6
* An `itemView` instance as part of a Collection View or Composite View, will have it's events bubbled up through the parent view, prepended with "itemview:" as the event name
### v0.7.5
* The `onBefore` method of ItemView can now return a deferred object
* Code cleanup for rendering methods
### v0.7.4
* Fixed issue with `unbindAll` in BindTo, that was skipping some items
### v0.7.3
* The `bindTo` method on the `EventAggregator` now returns a binding configuration object
* Automatic mixing in of `templateMethods` as template / view helper methods, in views that use the `serializeData` function
* A friendlier error message will be thrown from an appRouter if a route is configured with a method that does not exist on the controller
### v0.7.2
* Extracted `compileTemplate` method in TemplateCache for clarity and easier modification
* ItemView will wait until `onRender` has completed before triggering other rendered events
* Region now supports an `onShow` method, when defining a custom region
* Moved the default `serializeData` method to the base Marionette.View
* CompositeView now calls the `serializeData` method to get the model's data for the view
* `BindTo` changes:
* The `bindTo` method returns a "binding" object so that it can be unbound easily
* Now has an `unbindFrom` method that will unbind a binding object
### v0.7.1
* ItemView now has a `renderHtml` method that can be overriden to render the item view's data
* Region now supports an `initialize` function when extending a region to your own object type
* CollectionView correctly defers until all children are rendered
* Underscore templates are cached as pre-compiled templates, instead of re-compiling them on every render
* Updating AMD support to also work with CommonJS / NodeJS
* Correctiong build to include header / license info for all output files
* Pass JSLint with no warnings (run w/ Anvil.js build process)
* Removed GZip release files, as they were broken anyways
### v0.7.0
* **BREAKING**: The `renderTemplate` method has moved from the `ItemView` prototype on to the `Renderer` object
* **BREAKING**: The `appendHtml` method of the `CollectionView` now takes `collectionView, itemView` as the arguments, instead of `el, html`
* Added `Marionette.View` object, to contain a few basic parts of every Marionette view
* Added `Marionette.Renderer` object, to handle template rendering
* Views correctly trigger the "close" events before unbinding event subscribers
* Additional `CollectionView` changes:
* Extracted `getItemView` method to retrieve the `itemView` type, either from `this.itemView` or `this.options.itemView`
* Extracted `buildItemView` method to build each item's view
* Renamed `removeChildView` to `removeItemView` to make the language consistent
* Triggers "item:added" event after each item has been added
* Triggers "item:removed" event after an item has been removed
* `CompositeView` changes:
* No longer takes a `modelView`. Now directly renders the `template` specified
* Defaults to a recurive structure, where `itemView` is the current composite view type
* A `Region` will trigger a `show` event from any view that it shows
* Added common "render" event to all the view types
* Updated to Backbone v0.9.2
* Updated to jQuery v1.7.2
* AMD / RequireJS compliant version is provided
* Now using [Anvil.js](https://github.com/arobson/anvil.js) for builds
#### v0.6.4
* CollectionView and CompositeView can render without a collection
#### v0.6.3
* `ItemView` changes
* Calls a `beforeRender` and `beforeClose` method on the view, if it exists
* Triggers a `item:before:render` event, just prior to rendering
* Triggers a `item:before:close` and `item:closed` events, around the view's `close` method
* `CollectionView` changes
* Calls a `beforeRender` and `beforeClose` method on the view, if it exists
* Triggers a `collection:before:render` event before rendering
* Triggers a `collection:before:close` and `collection:closed` event, surrounding closing of the view
* The `CollectionView` and `CompositeView` now close child views before closing itself
#### v0.6.2
* **BREAKING:** The `CollectionView` no longer has a `reRender` method. Call `render` instead
* **BREAKING:** The `TemplateCache.get` method now returns a plain string instead of a jQuery selector object
* Fixed a bug with closing and then re-using a Layout with defined regions
* Fixed a potential race condition for loading / caching templates where a template would be loaded multiple times instead of just once
#### v0.6.1
* Fixed the composite view so that it renders the collection correctly when the collection is "reset"
* Fixed the composite view so that it re-renders correctly
* Fixed various deferred usages to only return promises, instead of the full deferred object
#### v0.6.0
* **BREAKING:** Renamed `LayoutManager` to `Layout`
* **BREAKING:** Renamed `RegionManager` to `Region`
* **BREAKING:** Renamed `TemplateManager` to `TemplateCache`
* **Layout**
* **BREAKING:** `Layout.render` no longer returns the view itself, now returns a jQuery deferred object
* The `.vent` attribute is now available in the `initializer` method
* Ensures that regions select the `$el` within the Layout's `$el` instead of globally on the page
* Initialize the regions before the layout, allowing access to the regions in the `onRender` method of the layout
* Close the Layout's regions before closing the layout itself
* **CompositeView**
* **BREAKING:** `CompositeView.render` no longer returns the view itself, now returns a jQuery deffered object
* Will only render the collection once. You can call `renderCollection` explicitly to re-render the entire collection
* Will only render the model view once. You can call `renderModel` explicitly to re-render the model
* Correctly close and dispose of the model view
* Triggers various events during rendering of model view and collection view
* Calls 'onRender' method of composite view, if it exists
* **ItemView**
* **BREAKING:** `ItemView.render` no longer returns the view itself, now returns a jQuery deferred object
* Optimization to only call `.toJSON` on either model or collection, not both
* Trigger "item:rendered" method after rendering (in addition to calling onRender method of the view)
* **CollectionView**
* **BREAKING:** `CollectionView.render` no longer returns the view itself, now returns a jQuery deferred object
* Trigger "collection:rendered" method after rendering (in addition to calling onRender method)
* Large updates to the readme/documentation
* Heavy use of `jQuery.Deferred()` and `jQuery.when/then` to better support asynchronous templates and rendering
#### v0.5.2
* **BREAKING:** Renamed `CompositeRegion` to `LayoutManager`
* Aliased CompsiteRegion to LayoutManager for backwards compatibility
* Bug fix for correctly initializing LayoutManager with specified options in constructor
#### v0.5.1
* Controller methods fired from an `AppRouter` are now called with `this` set to the controller, instead of the router
* Fixed a bug in the CompositeView where the list wouldn't render when passing in a populated collection
#### v0.5.0
* **BREAKING:** Extraced `CompositeView` out of the collection view
* Added `CompositeView` for managing leaf-branch/composite model structures
* Added `CompositeRegion` for managing nested views and nested region managers
* Added `attachView` method to `RegionManager` to attach existing view without rendering / replacing
* Specify how to attach HTML to DOM in region manager's `show` method
#### v0.4.8
* Don't re-render an ItemView when the view's model "change" event is triggered
#### v0.4.7
* Allow `RegionManager` to be instantiated with an `el` specified in the options
* Change how RegionManagers are added to an Application instance, to reduce memory usage from extraneous types
#### v0.4.6
* AppRouter can have it's `controller` specified directly in the router definition or in the construction function call
* Extracted `Marionette.EventAggregator` out in to it's own explicit object
#### v0.4.5
* CollectionView closes existing child views before re-rendering itself, when "reset"
event of collection is triggered
* CollectionView now has "initialEvents" method which configures it's initial events
* ItemView now has "initialEvents" method which configures it's initial events
#### v0.4.4
* CollectionView renders itself when the view's collection "reset" event is fired
* ItemView renders itself when the view's model "change" event is fired
* ItemView renders itself when the view's collection "reset" event is fired
#### v0.4.3
* Fixed bug with RegionManagers trying to select element before DOM is ready, to lazy-select the element on first use of `show`
#### v0.4.2
* **BREAKING:** Removed the `setOptions` method from the `Callbacks` object
* Refactored `Callbacks` object to use a jQuery Deferred instead of my own code
* Fixed template manager's `clear` so it properly clears a single template, when only one is specified
* Refactored the `RegionManager` code to support several new features
* now support returning a jQuery deferred object from a view's `render` method
* now have a `close` method that you can call to close the current view
* now trigger a "view:show" and "view:close" event
* correctly remove reference to previous views, allowing garbage collection of the view
* now support the `bindTo` and `unbindAll` methods, for binding/unbinding region manager events
#### v0.4.1
* Minor fix to context of template manager callback, to fix issue w/ async template loading
#### v0.4.0
* **BREAKING:** Rewrote the template manager to be async-template loading friendly
* **BREAKING:** Dropping support for Backbone v0.5.3 and below
* Added `Marionette.Callbacks` to manage a collection of callbacks in an async-friendly way
* Guarantee the execution of app initializer functions, even if they are added after the app
has been started.
* App triggers "start" event after initializers and initializer events
* Updated to Backbone v0.9.1
#### v0.3.1
* Make region managers initialize immediately when calling `app.addRegions`
#### v0.3.0
* **BREAKING:** `view.el` for `ItemView` and `CollectionView` is no longer a jQuery selector object. Use `view.$el` instead
* **BREAKING:** `regionManger.el` is no longer a jQuery selector object. Use `regionManager.$el` instead
* Updated to use Backbone v0.9.0
* Updated to use Underscore v1.3.1
* Removed default `itemView` from the `CollectionView` definition
* `CollectionView` now explicitly checks for an `itemView` defined on it, and throws an error if it's not found
#### v0.2.6
* Bind the context (`this`) of application initializer functions to the application object
#### v0.2.5
* Added `AppRouter`, to reduce boilerplate routers down to simple configuration
* `CollectionView` can be treated as a composite view, rendering an `model` and a `collection` of models
* Now works with either jQuery, Zepto, or enter.js
* `ItemView` will throw an error is no template is specified
#### v0.2.4
* Return `this` (the view itself) from `ItemView` and `CollectionView` `render` method
* Call `onRender` after the `CollectionView` has rendered itself
#### v0.2.3
* Fixed global variable leaks
* Removed declared, but unused variables
#### v0.2.2
* Fixed binding events in the collection view to use `bindTo` (#6)
* Updated specs for collection view
* Documentation fixes (#7)
#### v0.2.1
* Added `TemplateManager` to cache templates
* CollectionView binds to add/remove and updates rendering appropriately
* ItemView uses `TemplateManager` for template retrieval
* ItemView and CollectionView set `this.el = $(this.el)` in constructor
#### v0.2.0
* Added `ItemView`
* Added `CollectionView`
* Added `BindTo`
* Simplified the way `extend` is pulled from Backbone
#### v0.1.0
* Initial release
* Created documentation
* Generated annotated source code
================================================
FILE: docs/backbone.radio.md
================================================
# Backbone Radio
The Backbone Radio provides easy support for a number of messaging patterns for
Backbone and Marionette. This is provided through two basic constructs:
* Events - trigger events on a global object
* Requests - a global request/reply implementation
Radio takes these two constructs and adds the channel implementation - providing
namespaces for events and requests. In short, Radio is a global, namespaced,
message bus system designed to allow two otherwise unrelated objects to
communicate and share information.
## Documentation Index
* [Radio Concepts](#radio-concepts)
* [Channel](#channel)
* [Event](#event)
* [When to use Events](#when-to-use-events)
* [Request](#request)
* [Returning Values from Reply](#returning-values-from-reply)
* [When to use Requests](#when-to-use-requests)
* [Marionette Integration](#marionette-integration)
* [API](#api)
* [Examples](#examples)
* [Listening to Events](#listening-to-events)
* [Replying to Requests](#replying-to-requests)
* [Events and Requests](#events-and-requests)
## Radio Concepts
The `Radio` message bus exposes some core concepts:
* `Channel` - a namespace mechanism.
* `Event` - alert other parts of your application that something happened.
* `Request` - execute single functions in a different part of your application.
### Channel
The `channel` is the biggest reason to use `Radio` as our event aggregator - it
provides a clean point for dividing global events. To retrieve a channel, use
`Radio.channel(channelName)`:
```javascript
import Radio from 'backbone.radio';
const myChannel = Radio.channel('basic');
myChannel.on('some:event', function() {
// ...
});
```
The channel is accessible everywhere in your application. Simply import Radio
and call `channel()` to add listeners, fire callbacks, or send requests.
```javascript
import Radio from 'backbone.radio';
const someChannel = Radio.channel('basic'); // Exactly the same channel as above
someChannel.trigger('some:event'); // Will fire the function call above
```
[Live example](https://jsfiddle.net/marionettejs/0bejfju0/)
### Event
The `Radio Event` works exactly the same way as regular `Backbone Events`
like model/collection events. In fact, it uses the `Backbone.Events` mixin
internally, exposing its API:
* `channel.on('event', callback, [context])` - when `event` fires, call `callback`
* `channel.once('event', callback, [context])` - same as `on`, but triggered only once
* `channel.off('event')` - stop listening to event
* `channel.trigger('event', ..args)` - fires `event` and passes args into the
resulting `callback`
Events are typically used to alert other parts of the system that something
happened. For example, a user login expired or the user performed a specific
action.
As the Radio can be imported anywhere, we can use it as a global event
aggregator as such:
```javascript
import Radio from 'backbone.radio';
const myChannel = Radio.channel('star');
myChannel.on('left:building', function(person) {
console.log(person.get('name') + ' has left the building!');
});
const elvis = new Bb.Model({name: 'Elvis'});
myChannel.trigger('left:building', elvis);
myChannel.off('left:building');
```
Just like Backbone Events, the Radio respects the `listenTo` handler as well:
```javascript
import { MnObject } from 'backbone.marionette';
import Radio from 'backbone.radio';
const starChannel = Radio.channel('star');
const Star = MnObject.extend({
initialize() {
this.listenTo(starChannel, 'left:building', this.leftBuilding);
this.listenTo(starChannel, 'enter:building', function(person) {
console.log(person.get('name') + ' has entered the building!');
});
},
leftBuilding(person) {
console.log(person.get('name') + ' has left the building!');
}
});
```
Note that the event handler can be defined as a method like used for
`'left:building'` event or inline like used in `'enter:building'`.
[Live example](https://jsfiddle.net/marionettejs/s8nff8vz/)
As in Backbone, the event handler is called with `this` bound to the `Star` instance. See the
[Backbone documentation](http://backbonejs.org/#Events) for the full list of
Event handling methods.
#### When to use Events
The Event is a simple notification that _something happened_ and you may or may
not want other objects in your application to react to that. A few key
principles to bear in mind are:
* If you don't know what could act on the event, or don't care, use an `Event`
* If you find yourself calling it an action that occurred, use an `Event`
* If it's fine for many objects to perform an action, use an `Event`
* If you don't mind that no objects react, use an `Event`
If your use case isn't covered here, consider whether you want to
[use a request](#when-to-use-requests) instead.
### Request
The Request API provides a uniform way for unrelated parts of the system to
communicate with each other. For example, displaying notifications in response
to system activity. To attach a listener to a request channel, use `reply` or
`replyOnce` to attach a listener that immediately detaches after one call.
As with request, any arguments passed in `channel.request` will be passed into
the callback.
```javascript
import { MnObject } from 'backbone.marionette';
import Radio from 'backbone.radio';
const channel = Radio.channel('notify');
const Notification = MnObject.extend({
initialize() {
channel.reply('show:success', this.showSuccessMessage);
channel.reply('show:error', function(msg) {
// ...
});
},
showSuccessMessage(msg) {
// ...
}
});
```
So, for example, when a model sync fails:
```javascript
import { View } from 'backbone.marionette';
import Radio from 'backbone.radio';
const channel = Radio.channel('notify');
const ModelView = View.extend({
modelEvents: {
error: 'showErrorMessage'
},
showErrorMessage() {
channel.request('show:error', 'An error occurred contacting the server');
}
});
```
[Live example](https://jsfiddle.net/marionettejs/4uuyLe1q/)
Now, whenever the model attached to this View is unable to sync with the server,
we can display an error message to the user.
### Returning Values from Reply
The Request API is also able to return values, making it extremely useful for
accessing objects that would be otherwise difficult to access. As an example,
let's assume we attach the currently logged-in user to the `Application` object
and we want to know if they're still logged-in.
```javascript
import { Application } from 'backbone.marionette';
import Radio from 'backbone.radio';
const channel = Radio.channel('user');
const App = Application.extend({
initialize() {
channel.reply('user:loggedIn', this.isLoggedIn);
},
isLoggedIn() {
return this.model.getLoggedIn();
}
});
```
Then, from another view, instead of trying to find the User model. we simply
`request` it:
```javascript
const Radio = require('backbone.radio');
const channel = Radio.channel('user');
const loggedIn = channel.request('user:loggedIn'); // App.model.getLoggedIn()
```
[Live example](https://jsfiddle.net/marionettejs/zaje1rLj/)
### When to use Requests
A Request is, as you might guess, a request for information or for something to
happen. You will probably want to use requests when:
* You call the request an action to perform e.g. `show:notification`
* You want to get the return value of the request
* You want to call _exactly one_ function
In addition to this documentation, the Radio documentation can be found on
[Github](https://github.com/marionettejs/backbone.radio).
## Marionette Integration
The [`Application`](./marionette.application.md) and [`MnObject`](./marionette.mnobject.md) classes
provide bindings to provide automatic event listeners and / or request handlers on your object
instances. This works with a bound `channelName` to let us provide listeners using the `radioEvents`
and `radioRequests` properties.
**Errors** An error will be thrown if using the radio integration unless `backbone.radio` is setup
as a dependency.
### API
* `channelName` - defines the Radio channel that will be used for the requests and/or events
* `getChannel()` - returns a Radio.Channel instance using `channelName`
* `radioEvents` - defines an events hash with the events to be listened and its respective handlers
* `radioRequests` - defines an events hash with the requests to be replied and its respective handlers
### Examples
#### Listening to events
```javascript
import { MnObject } from 'backbone.marionette';
const Star = MnObject.extend({
channelName: 'star',
radioEvents: {
'left:building': 'leftBuilding'
},
leftBuilding(person) {
console.log(person.get('name') + ' has left the building!');
}
});
```
[Live example](https://jsfiddle.net/marionettejs/tf9467x4/)
This gives us a clear definition of how this object interacts with the `star`
radio channel.
#### Replying to requests
```javascript
import { MnObject } from 'backbone.marionette';
const Notification = MnObject.extend({
channelName: 'notify',
radioRequests: {
'show:success': 'showSuccessMessage',
'show:error': 'showErrorMessage'
},
showSuccessMessage(msg) {
// ...
},
showErrorMessage(msg) {
// ...
}
});
```
[Live example](https://jsfiddle.net/marionettejs/j2qgfk3s/)
We now have a clear API for communicating with the `Notification` across the
application. Don't forget to define the `channelName` on your `MnObject`
definition.
As with a normal request/reply, we can return values from these bound handlers:
```javascript
import { Application } from 'backbone.marionette';
const App = Application.extend({
channelName: 'user',
radioRequests: {
'user:loggedIn': 'isLoggedIn'
},
isLoggedIn() {
return this.model.getLoggedIn();
}
});
```
[Live example](https://jsfiddle.net/marionettejs/52rpd3zg/)
#### Events and requests
```javascript
import { MnObject } from 'backbone.marionette';
const NotificationHandler = MnObject.extend({
channelName: 'notify',
radioRequests: {
'show:success': 'showSuccessMessage',
'show:error': 'showErrorMessage'
},
radioEvents: {
'login:user': 'showProfileButton',
'logout:user': 'hideProfileButton'
},
showSuccessMessage(message) {
// ...
},
showErrorMessage(message) {
// ...
},
showProfileButton(user) {
// ...
},
hideProfileButton(user) {
// ...
}
});
```
In an unrelated module:
```javascript
import Radio from 'backbone.radio';
import User from './models/user';
const notifyChannel = Radio.channel('notify');
const userModel = new User();
// The following will call Notification.showErrorMessage(message)
notifyChannel.request('show:error', 'A generic error occurred!');
// The following will call Notification.showProfileButton(user)
notifyChannel.trigger('login:user', userModel);
```
[Live example](https://jsfiddle.net/marionettejs/dv40a0t2/)
================================================
FILE: docs/basics.md
================================================
# Common Marionette Concepts
This document covers the basic usage patterns and concepts across Marionette.
This includes things like calling conventions, setting attributes, common option
patterns etc.
## Documentation Index
* [Using ES6 Modules](#using-es6-modules)
* [Class-based Inheritance](#class-based-inheritance)
* [Value Attributes](#value-attributes)
* [Functions Returning Values](#functions-returning-values)
* [Binding Attributes on Instantiation](#binding-attributes-on-instantiation)
* [Common Marionette Functionality](./common.md)
## Using ES6 Modules
Marionette still supports using the library via an inline script.
The UMD build supports `noConflict()`.
```html
<script src="./backbone.marionette.js"></script>
<script>const MyMarionette = Marionette.noConflict();</script>
<script>new MyMarionette.View({ el: 'body' });</script>
```
The recommended solution is to choose a solution like a [package manager](./installation.md)
to allow for ES6 module importing of the library. The best way to import is using name imports.
```javascript
import { View } from 'backbone.marionette';
import * as Mn from 'backbone.marionette';
new View({ el: 'body' });
new Mn.Application();
```
However to support backwards compatibility Marionette exports all of its classes and
functions on a default object. This default export may be removed in a future version of
Marionette and it is recommend to migrate to a named imports.
```javascript
import Marionette from 'backbone.marionette';
new Marionette.Application();
```
## Class-based Inheritance
Like [Backbone](http://backbonejs.org/#Model-extend), Marionette utilizes the
[`_.extend`](http://underscorejs.org/#extend) function to simulate class-based
inheritance. [All built-in classes](./classes.md), such as `Marionette.View`, `Marionette.MnObject`
and everything that extend these provide an `extend` method for just this purpose.
In the example below, we create a new pseudo-class called `MyView`:
```javascript
import { View } from 'backbone.marionette';
const MyView = View.extend({});
```
You can now create instances of `MyView` with JavaScript's `new` keyword:
```javascript
const view = new MyView();
```
### Value Attributes
When we extend classes, we can provide class attributes with specific values by
defining them in the object we pass as the `extend` parameter:
```javascript
import { View } from 'backbone.marionette';
const MyView = View.extend({
className: 'bg-success',
template: '#template-identifier',
regions: {
myRegion: '.my-region'
},
modelEvents: {
change: 'removeBackground'
},
removeBackground() {
this.$el.removeClass('bg-success');
}
});
```
[Live example](https://jsfiddle.net/marionettejs/k93pejyb/)
When we instantiate `MyView`, each instance will be given a `.bg-success` class
with a `myRegion` region created on the `.my-region` element.
### Functions Returning Values
In almost every instance where we can set a value, we can also assign a function
to figure out the value at runtime. In this case, Marionette will run the
function on instantiation and use the returned value:
```javascript
import { View } from 'backbone.marionette';
const MyView = View.extend({
className() {
return this.model.successful() ? 'bg-success' : 'bg-error';
},
template: '#template-identifier',
regions() {
return {
myRegion: '.my-region'
};
},
modelEvents() {
const wasSuccessful = this.model.successful();
return {
change: wasSuccessful ? 'removeBackground' : 'alert'
};
},
removeBackground() {
this.$el.removeClass('bg-success');
},
alert() {
console.log('model changed');
}
});
```
[Live example](https://jsfiddle.net/marionettejs/nn1754fc/)
As we can see, almost all of the attributes here can be worked out dynamically.
In most cases, Marionette will call the function once at instantiation, or first
render, and preserve the value throughout the lifetime of the View. There are
some exceptions to this rule - these will be referred to with their respective
documentation.
### Function Context
When using functions to set attributes, Marionette will assign the instance of
your new class as `this`. You can use this feature to ensure you're able to
access your object in cases where `this` isn't what you might expect it to be.
### Binding Attributes on Instantiation
In Marionette, most attributes can be bound on class instantiation in addition
to being set when the [class is defined](#class-based-inheritance). You can use
this to bind events, triggers, models, and collections at runtime:
```javascript
import { View } from 'backbone.marionette';
const MyView = View.extend({
template: '#template-identifier'
});
const myView = new MyView({
triggers: {
'click a': 'show:link'
}
});
```
This will set a trigger called `show:link` that will be fired whenever the user
clicks an `<a>` inside the view.
Options set here will override options set on class definition. So, for example:
```javascript
import { View } from 'backbone.marionette';
const MyView = View.extend({
template: '#template-identifier',
triggers: {
'click @ui.save': 'save:form'
}
});
const myView = new MyView({
triggers: {
'click a': 'show:link'
}
});
```
In this example, the trigger for `save:form` will no longer be fired, as the
trigger for `show:link` completely overrides it.
## Setting Options
Marionette can set options when you instantiate a class. This lets you override
many class-based attributes when you need to. You can also pass new information
specific to the object in question that it can access through special helper
methods.
```javascript
import { View } from 'backbone.marionette';
const MyView = View.extend({
checkOption() {
console.log(this.getOption('foo'));
}
});
const view = new MyView({
foo: 'some text'
});
view.checkOption(); // prints 'some text'
```
[Live example](https://jsfiddle.net/marionettejs/6n02ex1m/)
## Common Marionette Functionality
Marionette has a few methods and core functionality that are common to [all classes](./classes.md).
[Continue Reading...](./common.md).
================================================
FILE: docs/classes.md
================================================
# Marionette Classes
Marionette follows Backbone's [pseudo-class architecture](./basics.md#class-based-inheritance).
This documentation is meant to provide a comprehensive listing of those classes so that
the reader can have a high-level view and understand functional similarities between the classes.
All of these classes share a [common set of functionality](./common.md).
### [Marionette.View](./marionette.view.md)
A `View` is used for managing portions of the DOM via a single parent DOM element or `el`.
It provides a consistent interface for managing the content of the `el` which is typically
administered by serializing a `Backbone.Model` or `Backbone.Collection` and rendering
a template with the serialized data into the `View`s `el`.
The `View` provides event delegation for capturing and handling DOM interactions as well as
the ability to separate concerns into smaller, managed child views.
`View` includes:
- [The DOM API](./dom.api.md)
- [Class Events](./events.class.md#view-events)
- [DOM Interactions](./dom.interactions.md)
- [Child Event Bubbling](./events.md#event-bubbling)
- [Entity Events](./events.entity.md)
- [View Rendering](./view.rendering.md)
- [Prerendered Content](./dom.prerendered.md)
- [View Lifecycle](./view.lifecycle.md)
A `View` can have [`Region`s](#marionetteregion) and [`Behavior`s](#marionettebehavior)
### [Marionette.CollectionView](./marionette.collectionview.md)
A `CollectionView` like `View` manages a portion of the DOM via a single parent DOM element
or `el`. This view manages an ordered set of child views that are shown within the view's `el`.
These children are most often created to match the models of a `Backbone.Collection` though a
`CollectionView` does not require a `collection` and can manage any set of views.
`CollectionView` includes:
- [The DOM API](./dom.api.md)
- [Class Events](./events.class.md#collectionview-events)
- [DOM Interactions](./dom.interactions.md)
- [Child Event Bubbling](./events.md#event-bubbling)
- [Entity Events](./events.entity.md)
- [View Rendering](./view.rendering.md)
- [Prerendered Content](./dom.prerendered.md)
- [View Lifecycle](./view.lifecycle.md)
A `CollectionView` can have [`Behavior`s](#marionettebehavior).
### [Marionette.Region](./marionette.region.md)
Regions provide consistent methods to manage, show and destroy views in your
applications and views.
`Region` includes:
- [Class Events](./events.class.md#region-events)
- [The DOM API](./dom.api.md)
### [Marionette.Behavior](marionette.behavior.md)
A `Behavior` provides a clean separation of concerns to your view logic, allowing you to
share common user-facing operations between your views.
`Behavior` includes:
- [Class Events](./events.class.md#behavior-events)
- [DOM Interactions](./dom.interactions.md)
- [Entity Events](./events.entity.md)
### [Marionette.Application](marionette.application.md)
An `Application` provides hooks for organizing and initiating other elements and a view tree.
`Application` includes:
- [Class Events](./events.class.md#application-events)
- [Radio API](./backbone.radio.md#marionette-integration)
- [MnObject's API](./marionette.mnobject.md)
An `Application` can have a single [region](./marionette.application.md#application-region).
### [Marionette.MnObject](marionette.mnobject.md)
`MnObject` incorporates backbone conventions `initialize`, `cid` and `extend`.
`MnObject` includes:
- [Class Events](./events.class.md#mnobject-events)
- [Radio API](./backbone.radio.md#marionette-integration).
## Routing in Marionette
Users of versions of Marionette prior to v4 will notice that a router is no longer bundled.
The [Marionette.AppRouter](https://github.com/marionettejs/marionette.approuter) was extracted
and the core library will no longer hold an opinion on routing.
[Continue Reading](./routing.md) about routing in Marionette.
================================================
FILE: docs/common.md
================================================
# Common Marionette Functionality
Marionette has a few methods that are common to [all classes](./classes.md).
## Documentation Index
* [initialize](#initialize)
* [extend](#extend)
* [Events API](#events-api)
* [triggerMethod](#triggermethod)
* [bindEvents](#bindevents)
* [unbindEvents](#unbindevents)
* [bindRequests](#bindrequests)
* [unbindRequests](#unbindrequests)
* [normalizeMethods](#normalizemethods)
* [getOption](#getoption)
* [mergeOptions](#mergeoptions)
* [The `options` Property](#the-options-property)
### `initialize`
Like the backbone classes, `initialize` is a method you can define on any Marionette class
that will be called when the class is instantiated and will be passed any arguments passed
at instantiation. The first argument may contain [options](#getoption) the class attaches
to the instance.
```js
import { MnObject } from 'backbone.marionette';
const MyObject = MnObject.extend({
initialize(options, arg2) {
console.log(options.foo, this.getOption('foo'), arg2);
}
});
const myObject = new MyObject({ foo: 'bar' }, 'baz'); // logs "bar" "bar" "baz"
```
[Live example](https://jsfiddle.net/marionettejs/1ytrwyog/)
### `extend`
Borrowed from backbone, `extend` is available on all class definitions for
[class based inheritance](./basics.md#class-based-inheritance)
### Events API
The [Backbone.Events API](http://backbonejs.org/#Events) is available to all classes.
Each Marionette class can both `listenTo` any object with this API and have events
triggered on the instance.
**Note** The events API should not be confused with [view `events`](/.dom.interactions.md#view-events)
which capture DOM events.
### `triggerMethod`
Trigger an event and [a corresponding method](./events.md#onevent-binding) on the object.
It is the same as `Backbone`'s [`trigger`](http://backbonejs.org/#Events-trigger)
but with the additional method handler.
When an event is triggered, the first letter of each section of the
event name is capitalized, and the word "on" is prepended to the front
of it. Examples:
* `triggerMethod('foo')` fires the "onFoo" function
* `triggerMethod('before:foo')` fires the "onBeforeFoo" function
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.
`triggerMethod('foo', bar)` will call `onFoo(bar){...})`
```javascript
import { MnObject } from 'backbone.marionette';
const MyObject = MnObject.extend({
initialize(){
this.triggerMethod('foo', 'baz');
},
onFoo(bar){
console.log(bar);
}
});
const myObj = new MyObject(); // console.log "baz"
myObj.triggerMethod('foo', 'qux'); // console.log "qux"
```
More information on `triggerMethod` can be found in the [Marionette events documentation](./events.md#triggermethod).
### `bindEvents`
This method is used to bind any object that works with the [`Backbone.Events` API](#events-api).
This includes all Backbone classes, Marionette classes and [Radio](./backbone.radio.md) channels.
```javascript
import Radio from 'backbone.radio';
import { View } from 'backbone.marionette';
const MyView = View.extend({
fooEvents: {
'change:foo': 'doSomething'
},
initialize(){
this.fooChannel = Radio.channel('foo');
this.bindEvents(this.fooChannel, this.fooEvents);
},
doSomething(){
// the "change:foo" event was fired from the radio channel
// respond to it appropriately, here.
}
});
```
[Live example](https://jsfiddle.net/marionettejs/L640ecac/)
The first parameter is the `entity` (Backbone.Model, Backbone.Collection or
any object that has Backbone.Events mixed in) to bind the events from.
The second parameter is a hash of `{ 'event:name': 'eventHandler' }`
configuration. A function can be supplied instead of a string handler name.
**Errors** An error will be thrown if the second parameter is not an object.
### `unbindEvents`
This method is used to unbind any object that works with the [`Backbone.Events` API](#events-api).
This includes all Backbone classes, Marionette classes and [Radio](./backbone.radio.md) channels.
Calling this method without a events hash will unbind all events from the channel.
```javascript
import Radio from 'backbone.radio';
import { View } from 'backbone.marionette';
const MyView = View.extend({
fooEvents: {
'change:foo': 'onChangeFoo',
'stop': 'onStop'
},
initialize(){
this.fooChannel = Radio.channel('foo');
this.bindEvents(this.fooChannel, this.fooEvents);
},
onChangeFoo(){
// the "change:foo" event was fired from the radio channel
// respond to it appropriately, here.
// Doing something
this.listenTo(this.fooChannel, 'adhoc', this.render);
},
onStop() {
// Removes all fooEvents
this.unbindEvents(this.fooChannel, this.fooEvents);
// Removes all bound fooChannel events including `adhoc`
this.unbindEvents(this.fooChannel);
}
});
```
The first parameter is the `entity` (Backbone.Model, Backbone.Collection or
any object that has Backbone.Events mixed in) to bind the events from.
The second parameter is a hash of `{ 'event:name': 'eventHandler' }`
configuration. A function can be supplied instead of a string handler name.
If the second paramater is not supplied, all listeners are removed.
[Live example](https://jsfiddle.net/marionettejs/yvsfm65c/)
### `bindRequests`
This method is used to bind any object that works with the [`Backbone.Radio` Request API](https://github.com/marionettejs/backbone.radio#backboneradiorequests).
This includes [Radio](./backbone.radio.md) channels.
```javascript
import Radio from 'backbone.radio';
import { View } from 'backbone.marionette';
const MyView = View.extend({
channelName: 'myChannelName',
radioRequests: {
'foo:bar': 'doFooBar'
},
initialize() {
const channel = Radio.channel(this.channelName);
this.bindRequests(channel, this.radioRequests);
},
doFooBar() {
console.log('foo:bar');
return 'bar';
}
});
const myView = new MyView();
const channel = Radio.channel('myChannelName');
channel.request('foo:bar'); // Logs 'foo:bar' and returns 'bar'
```
[Live example](https://jsfiddle.net/marionettejs/hmjgkg7w/)
The first parameter, `channel`, is an instance from `Radio`.
The second parameter is a hash of `{ 'request:name': 'replyHandler' }`
configuration. A function can be supplied instead of a string handler name.
**Errors** An error will be thrown if the second parameter is not an object.
### `unbindRequests`
This method is used to unbind any object that works with the [`Backbone.Radio` Request API](https://github.com/marionettejs/backbone.radio#backboneradiorequests).
Calling this method without a radio requests hash will unbind all requests
from the channel.
**NOTE: To avoid memory leaks, `unbindRequests` should be called
in or before `onBeforeDestroy`.**
```javascript
import Radio from 'backbone.radio';
import { View } from 'backbone.marionette';
const MyView = View.extend({
channelName: 'myChannelName',
radioRequests: {
'foo:bar': 'doFooBar'
},
onAttach() {
const channel = Radio.channel(this.channelName);
this.bindRequests(channel, this.radioRequests);
},
onBeforeDetach() {
const channel = Radio.channel(this.channelName);
this.unbindRequests(channel, this.radioRequests);
}
});
```
[Live examples](https://jsfiddle.net/marionettejs/r5kmwwke/)
The first parameter, `channel`, is an instance from `Radio`.
The second parameter is a hash of `{ 'request:name': 'replyHandler' }`
configuration. A function can be supplied instead of a string handler name.
If the second paramater is not supplied, all handlers are removed.
### `normalizeMethods`
Receives a hash of event names and functions and/or function names, and returns the
same hash with the function names replaced with the function references themselves.
```javascript
import { View } from 'backbone.marionette';
const MyView = View.extend({
initialize() {
const hash = {
'action:one': 'handleActionOne', // This will become a reference to `this.handleActionOne`
'action:two': this.handleActionTwo
};
this.normalizedHash = this.normalizeMethods(hash);
},
do(action) {
this.normalizedHash[action]();
},
handleActionOne() {
console.log('action:one was fired');
},
handleActionTwo() {
console.log('action:two was fired');
}
});
const myView = new MyView();
myView.do('action:one');
myView.do('action:two');
```
[Live example](https://jsfiddle.net/marionettejs/zzjhm4p1/)
### `getOption`
To access an option, we use the `getOption` method. `getOption` will fall back
to the value of the same name defined on the instance if not defined in the options.
```javascript
import { View } from 'backbone.marionette';
const View = View.extend({
classVal: 'class value',
initialize(){
this.instanceVal = 'instance value'
}
});
const view = new View({ optVal: 'option value' });
view.getOption('instanceVal'); // instance value
view.getOption('classVal'); // class value
view.getOption('optVal'); // option value
const view2 = new View({ instanceVal: 'foo', classVal: 'bar', optVal: 'baz' });
view.getOption('instanceVal'); // foo
view.getOption('classVal'); // bar
view.getOption('optVal'); // baz
```
[Live example](https://jsfiddle.net/marionettejs/ekvb8wwa/)
#### Falsey values
The `getOption` function will return any falsey value from the `options`,
other than `undefined`. If an object's options has an undefined value, it will
attempt to read the value from the object directly.
For example:
```javascript
import { MnObject } from 'backbone.marionette';
const MyObject = MnObject.extend({
foo: 'bar',
initialize() {
console.log(this.getOption('foo'));
}
});
const model1 = new MyObject(); // => "bar"
const myObj = {};
console.log(myObj.foo); // undefined
const model2 = new MyObject({ foo: myObj.foo }); // => "bar"
```
[Live example](https://jsfiddle.net/marionettejs/2ddk28ap/)
In this example, "bar" is returned both times because the second
example has an undefined value for `f`.
### `mergeOptions`
The `mergeOptions` method takes two arguments: an `options` object and `keys` to
pull from the options object. Any matching `keys` will be merged onto the
class instance. For example:
```javascript
import { MnObject } from 'backbone.marionette';
const MyObject = MnObject.extend({
initialize(options) {
this.mergeOptions(options, ['model', 'something']);
// this.model and this.something will now be available
}
});
const myObject = new MyObject({
model: new Backbone.Model(),
something: 'test',
another: 'value'
});
console.log(myObject.model);
console.log(myObject.something);
console.log(myObject.getOption('another'));
```
[Live example](https://jsfiddle.net/marionettejs/ub510cbx/)
In this example, `model` and `something` are directly available on the
`MyObject` instance, while `another` must be accessed via `getOption`. This is
handy when you want to add extra keys that will be used heavily throughout the
defined class.
### The `options` Property
The Marionette classes accept an `options` property in the class definition
which is merged with the `options` argument passed at instantiation. The
values from the passed in `options` overrides the property values.
> The `options` argument passed in `initialize` method is equal to the passed at
> class instantiation. To get the option inside initialize considering the
> `options` property is necessary to use `getOption`
```javascript
import { MnObject } from 'backbone.marionette';
const MyObject = MnObject.extend({
options: {
foo: 'bar',
another: 'thing'
},
initialize(options) {
console.log(options.foo) // undefined
console.log(this.getOption('foo')) // 'bar'
console.log(this.getOption('another')) // 'value'
}
});
const myObject = new MyObject({
another: 'value'
});
```
## Marionette Classes
Marionette provides a few classes for building your view tree and
application structure.
[Continue Reading...](./classes.md).
================================================
FILE: docs/dom.api.md
================================================
# The DOM API
With the release of Marionette 3.2, developers can remove the dependency on
jQuery and integrate with the DOM using a custom api.
## API Methods
The DOM API manages the DOM on behalf of [each view class and `Region`](./classes.md).
It defines the methods that actually attach and remove views and children.
[The default API](#the-default-api) depends on Backbone's jQuery `$` object however it does not
rely on jQuery-specific behavior. This should make it easier to develop your own
API. You will, however, [need to also handle Backbone's jQuery integration](#backbone-jquery-integration).
### `createBuffer()`
Returns a new HTML DOM node instance. The resulting node can be passed into the
other DOM functions.
### `getDocumentEl(el)`
Look up the top level element of `el`. Used by Marionette to determine attachment.
```javascript
const elIsAttached = this.Dom.hasEl(this.Dom.getDocumentEl(this.el), this.el);
```
### `getEl(selector)`
Lookup the `selector` string withing the DOM. The `selector` may also be a DOM element.
It should return an array-like object of the node.
### `findEl(el, selector)`
Lookup the `selector` string within the DOM node `el`. It should return an array-like object of nodes.
### `hasEl(el, childEl)`
Returns true if the el contains the node childEl
### `detachEl(el)`
Detach `el` from the DOM without removing listeners.
### `replaceEl(newEl, oldEl)`
Remove `oldEl` from the DOM and put `newEl` in its place.
### `swapEl(el1, el2)`
Swaps the location of `el1` and `el2` in the DOM.
Both els must have a parentNode to be able to swap.
### `setContents(el, html)`
Replace the contents of `el` with the HTML string of `html`. Unlike other DOM
functions, this only takes a literal string for its second argument.
### `appendContents(el, contents)`
Takes the DOM node `el` and appends the DOM node `contents` to the end of the
element's contents.
### `hasContents(el)`
Returns a boolean indicating if the `el` has child nodes.
### `detachContents(el)`
Remove the inner contents of `el` from the DOM while leaving `el` itself in the
DOM.
## The default API
The API used by Marionette by default is attached as `Marionette.DomApi`.
This is useful if you [change the API](#providing-your-own-dom-api) globally,
but want to reuse the default in certain cases.
```javascript
import { setDomApi, DomApi } from 'backbone.marionette';
import MyDOMApi from './mydom';
setDomApi(MyDOMApi);
// Use MyDOMApi everywhere but `Marionette.View`
View.setDomApi(DomApi);
```
## Providing Your Own DOM API
To implement your own DOM API use `setDomApi`:
```javascript
import { setDomApi } from 'backbone.marionette';
import MyDOMApi from './mydom';
setDomApi(MyDOMApi);
```
You can also implement a different DOM API for a particular class:
```javascript
import { View } from 'backbone.marionette';
View.setDomApi(MyDOMApi);
```
`CollectionView`, `Region`, and `View`
all have `setDomApi`. Each extended class may have their own DOM API.
Additionally a DOM API can be partially set:
```javascript
import { View } from 'backbone.marionette';
const MyView = View.extend();
MyView.setDomApi({
setContents(el, html) {
el.innerHTML = html;
}
});
```
### Backbone jQuery Integration
Backbone.js is tied to jQuery's API for managing DOM manipulation. If you want
to completely remove jQuery from your Marionette app, you'll also have to
provide your own versions of the following methods:
* [`_setAttributes`](http://backbonejs.org/docs/backbone.html#section-170)
* [`delegate`](http://backbonejs.org/docs/backbone.html#section-165)
* [`undelegate`](http://backbonejs.org/docs/backbone.html#section-167)
#### See Also
The DOM API takes care of the other DOM manipulation methods for you. The
[Backbone Wiki](https://github.com/jashkenas/backbone/wiki/using-backbone-without-jquery)
has a good reference for removing jQuery from the app, including Browserify and
Webpack configuration hooks.
================================================
FILE: docs/dom.interactions.md
================================================
# DOM Interactions
In addition to what Backbone provides the views, Marionette has additional API
for DOM interactions available to all Marionette [view classes](./classes.md).
### DOM Interactions in a Backbone.View
Marionette's Views extend [`Backbone.View`](http://backbonejs.org/#View) and
so have references to the view's `el`, `$el`, and `this.$()` as well as
defining an `events` hash.
These methods provide ways for interacting with the view scoped to it's `el`
_and_ all of the view's children. To restate `events` and `this.$()` will query
the view's template and all of the children. Marionette's added interfaces
attempt to scope interactions with only the view's template, leaving the
children to handle themselves.
### Binding To User Input
Views can bind custom events whenever users perform some interaction with the
DOM. Using the view [`events`](#view-events) and [`triggers`](#view-triggers)
handlers lets us either bind user input directly to an action or fire a generic
trigger that may or may not be handled.
#### Event and Trigger Mapping
The `events` and `triggers` attributes bind DOM events to actions to perform on
the view. They each take a DOM event key and a mapping to the handler.
We'll cover a simple example:
```javascript
import { View } from 'backbone.marionette';
const MyView = View.extend({
events: {
'drop': 'onDrop',
'click .btn-show-modal': 'onShowModal',
'click @ui.save': 'onSave'
},
triggers: {
'click @ui.close': 'close'
},
ui: {
save: '.btn-save',
close: '.btn-cancel'
},
onShowModal() {
console.log('Show the modal');
},
onSave() {
console.log('Save the form');
},
onDrop() {
console.log('Handle a drop event anywhere in the element');
}
});
```
Event listeners are constructed by:
```javascript
'<dom event> [dom node]': 'listener'
```
The `dom event` can be a jQuery DOM event - such as `click` - or another custom
event, such as Bootstrap's `show.bs.modal`.
The `dom node` represents a jQuery selector or a `ui` key prefixed by `@.`.
The `dom node` is optional, and if omitted, the view's `$el` will be used as the
selector. For more information about the `ui` object, and how it works, see
[the documentation on ui](#organizing-your-view).
#### View `events`
The view `events` attribute binds DOM events to functions or methods on the
view. The simplest form is to reference a method on the view:
```javascript
import { View } from 'backbone.marionette';
const MyView = View.extend({
events: {
'click a': 'onShowModal'
},
onShowModal(event) {
console.log('Show the modal');
}
});
```
[Live example](https://jsfiddle.net/marionettejs/jfxwtmxj/)
The DOM event gets passed in as the first argument, allowing you to see any
information passed as part of the event.
**When passing a method reference, the method must exist on the View.**
The `events` attribute can also directly bind functions:
```javascript
import { View } from 'backbone.marionette';
const MyView = View.extend({
events: {
'click a'(event) {
console.log('Show the modal');
}
}
});
```
[Live example](https://jsfiddle.net/marionettejs/obt5vt09/)
As when passing a string reference to a view method, the `events` attribute
passes in the `event` as the argument to the function called.
**Note** Backbone `events` are delegated to the view's `el`. This means that
events with a dom node selector will be handled for the view and any descendants.
So if you attach a child with the same selector as the parent event handler, the
parent will handle the event for both views.
#### View `triggers`
The view `triggers` attribute binds DOM events to Marionette events that
can be responded to at the view or parent level. For more information on events,
see the [events documentation](./events.md). This section will just
cover how to bind these events to views.
```javascript
import { View } from 'backbone.marionette';
const MyView = View.extend({
triggers: {
'click a': 'click:link'
},
onClickLink(view, event) {
console.log('Show the modal');
}
});
```
[Live example](https://jsfiddle.net/marionettejs/exu2s3tL/)
When the `a` tag is clicked here, the `link:click` event is fired. This event
can be listened to using the [`onEvent` Binding](./events.md#onevent-binding)
technique discussed in the [events documentation](./events.md).
The major benefit of the `triggers` attribute over `events` is that triggered
events can bubble up to any parent views. For a full explanation of bubbling
events and listening to child events, see the
[event bubbling documentation](./events.md#event-bubbling)..
#### View `triggers` Event Object
Event handlers will receive the triggering view as the first argument and the
DOM Event object as the second followed by any extra parameters triggered by the event.
**NOTE** It is _strongly recommended_ that View's handle their own DOM event objects. It should
be considered a best practice to not utilize the DOM event in external listeners.
By default all trigger events are stopped with [`preventDefault`](./features.md#triggerspreventdefault)
and [`stopPropagation`](./features.md#triggersstoppropagating) methods. This by nature artificially
scopes event handling to the view's template preventing event handling of the same selectors in
child views. However you can manually configurethe triggers using a hash instead of an event name.
The example below triggers an event and prevents default browser behaviour using `preventDefault`.
```js
import { View } from 'backbone.marionette';
const MyView = View.extend({
triggers: {
'click a': {
event: 'link:clicked',
preventDefault: true, // this param is optional and will default to true
stopPropagation: false
}
}
});
```
The default behavior for calling `preventDefault` can be changed with the feature flag
[`triggersPreventDefault`](./features.md#triggerspreventdefault), and `stopPropagation`
can be changed with the feature flag [`triggersStopPropagation`](./features.md#triggersstoppropagating).
## Organizing Your View
The `View` provides a mechanism to name parts of your template to be used
throughout the view with the `ui` attribute. This provides a number of benefits:
1. Provide a single defined reference to commonly used UI elements
2. Cache the jQuery selector
3. Query from only the view's template and not the children
### Defining `ui`
To define your `ui` hash, just set an object of named jQuery selectors to the
`ui` attribute of your View:
```javascript
import { View } from 'backbone.marionette';
const MyView = View.extend({
template: MyTemplate,
ui: {
save: '#save-button',
close: '.close-button'
}
});
```
Inside your view, the `save` and `close` references will point to the jQuery
selectors `#save-button` and `.close-button`respectively found only in the
rendered `MyTemplate`.
### Accessing UI Elements
To get the handles to your UI elements, use the `getUI(ui)` method:
```javascript
import { View } from 'backbone.marionette';
const MyView = View.extend({
template: MyTemplate,
ui: {
save: '#save-button',
close: '.close-button'
},
onFooEvent() {
const $saveButton = this.getUI('save');
$saveButton.addClass('disabled');
$saveButton.attr('disabled', 'disabled');
}
});
```
[Live example](https://jsfiddle.net/marionettejs/rpa58v0g/)
As `$saveButton` here is a jQuery selector, you can call any jQuery methods on
it, according to the jQuery documentation.
#### Referencing UI in `events` and `triggers`
The UI attribute is especially useful when setting handlers in the
[`events`](#view-events) and [`triggers`](#view-triggers) objects - simply use
the `@ui.` prefix:
```javascript
import { View } from 'backbone.marionette';
const MyView = View.extend({
template: MyTemplate,
ui: {
save: '#save-button',
close: '.close-button'
},
events: {
'click @ui.save': 'onSave'
},
triggers: {
'click @ui.close': 'close'
},
onSave() {
this.model.save();
}
});
```
[Live example](https://jsfiddle.net/marionettejs/f2k0wu05/)
In this example, when the user clicks on `#save-button`, `onSave` will be
called. If the user clicks on `.close-button`, then the event `close:view` will
be fired on `MyView`.
By prefixing with `@ui`, we can change the underlying template without having to
hunt through our view for every place where that selector is referenced - just
update the `ui` object.
================================================
FILE: docs/dom.prerendered.md
================================================
# Prerendered Content
[View classes](./classes.md) can be initialized with pre-rendered DOM.
This can be HTML that's currently in the DOM:
```javascript
import { View } from 'backbone.marionette';
const myView = new View({ el: $('#foo-selector') });
myView.isRendered(); // true if '#foo-selector` exists and has content
myView.isAttached(); // true if '#foo-selector` is in the DOM
```
Or it can be DOM created in memory:
```javascript
import { View } from 'backbone.marionette';
const $inMemoryHtml = $('<div>Hello World!</div>');
const myView = new View({ el: $inMemoryHtml });
```
[Live example](https://jsfiddle.net/marionettejs/b2yz38gj/)
In both of the cases at instantiation the view will determine
[its state](./view.lifecycle.md) as to whether the el is rendered
or attached.
**Note** `render` and `attach` events will not fire for the initial
state as the state is set already at instantiation and is not changing.
## Managing `View` children
With [`View`](./marionette.view.md) in most cases the [`render` event](./events.class.md#render-and-beforerender-events)
is the best place to show child views [for best performance](./marionette.view.md#efficient-nested-view-structures).
However with pre-rendered DOM you may need to show child views in `initialize`
as the view will already be rendered.
```javascript
import { View } from 'backbone.marionette';
import HeaderView from './header-view';
const MyBaseLayout = View.extend({
regions: {
header: '#header-region',
content: '#content-region'
},
el: $('#base-layout'),
initialize() {
this.showChildView('header', new HeaderView());
}
});
```
### Managing a Pre-existing View Tree.
It may be the case that you need child views of already existing DOM as well.
To set this up you'll need to query for `el`s down the tree:
```javascript
import { View } from 'backbone.marionette';
import HeaderView from './header-view';
const MyBaseLayout = View.extend({
regions: {
header: '#header-region',
content: '#content-region'
},
el: $('#base-layout'),
initialize() {
this.showChildView('header', new HeaderView({
el: this.getRegion('header').$el.contents()
}));
}
});
```
The same can be done with [`CollectionView`](./marionette.collectionview.md):
```javascript
import { CollectionView } from 'backbone.marionette';
import ItemView from './item-view';
const MyList = CollectionView.extend({
el: $('#base-table'),
childView: ItemView,
childViewContainer: 'tbody',
buildChildView(model, ChildView) {
const index = this.collection.indexOf(model);
const childEl = this.$('tbody').contents()[index];
return new ChildView({
model,
el: childEl
});
}
});
const myList = new MyList({ collection: someCollection });
// Unlike `View`, `CollectionView` should be rendered to build the `children`
myList.render();
```
https://github.com/marionettejs/backbone.marionette/issues/3128
## Re-rendering children of a view with preexisting DOM.
You may be instantiating a `View` with existing HTML, but if you re-render the view,
like any other view, your view will render the `template` into the view's `el` and
any children will need to be re-shown.
So your view will need to be prepared to handle both scenarios.
```javascript
import _ from 'underscore';
import { View } from 'backbone.marionette';
import HeaderView from './header-view';
const MyBaseLayout = View.extend({
regions: {
header: '#header-region',
content: '#content-region'
},
el: $('#base-layout'),
initialize() {
this.showChildView('header', new HeaderView({
el: this.getRegion('header').$el.contents()
}));
},
template: _.template('<div id="header-region"></div><div id="content-region"></div>'),
onRender() {
this.showChildView('header', new HeaderView());
}
});
```
================================================
FILE: docs/events.class.md
================================================
# Class Events
Marionette uses [`triggerMethod`](./events.md#triggermethod) internally to trigger various
events used within the [classes](./classes.md). This provides ['onEvent' binding](./events.md#onevent-binding)
providing convenient hooks for handling class events. Notably all internally triggered events
will pass the triggering class instance as the first argument of the event.
## Documentation Index
* [Application Events](#application-events)
* [`before:start` event](#before-start-event)
* [`start` event](#start-event)
* [Behavior Events](#behavior-events)
* [`initialize` event](#initialize-event)
* [Proxied Events](#proxied-events)
* [Region Events](#region-events)
* [`show` and `before:show` events](#show-and-beforeshow-events)
* [`empty` and `before:empty` events](#empty-and-beforeempty-events)
* [MnObject Events](#mnobject-events)
* [View Events](#view-events)
* [`add:region` and `before:add:region` events](#addregion-and-beforeaddregion-events)
* [`remove:region` and `before:remove:region` events](#removeregion-and-beforeremoveregion-events)
* [CollectionView Events](#collectionview-events)
* [`add:child` and `before:add:child` events](#addchild-and-beforeaddchild-events)
* [`remove:child` and `before:remove:child` events](#removechild-and-beforeremovechild-events)
* [`sort` and `before:sort` events](#sort-and-beforesort-events)
* [`filter` and `before:filter` events](#filter-and-beforefilter-events)
* [`render:children` and `before:render:children` events](#renderchildren-and-beforerenderchildren-events)
* [`destroy:children` and `before:destroy:children` events](#destroychildren-and-beforedestroychildren-events)
* [CollectionView EmptyView Region Events](#collectionview-emptyview-region-events)
* [DOM Change Events](#dom-change-events)
* [`render` and `before:render` events](#render-and-beforerender-events)
* [`attach` and `before:attach` events](#attach-and-beforeattach-events)
* [`detach` and `before:detach` events](#detach-and-beforedetach-events)
* [`dom:refresh` event](#domrefresh-event)
* [`dom:remove` event](#domremove-event)
* [Advanced Event Settings](#advanced-event-settings)
* [Destroy Events](#destroy-events)
* [`destroy` and `before:destroy` events](#destroy-and-beforedestroy-events)
* [Supporting Backbone Views](#supporting-backbone-views)
* [`Marionette.Events` and `triggerMethod`](#marionetteevents-and-triggermethod)
* [Lifecycle Events](#lifecycle-events)
## Application Events
The `Application` object will fire two events:
### `before:start` event
Fired just before the application is started. Use this to prepare the
application with anything it will need to start, for example instantiating
routers, models, and collections.
### `start` event
Fired as part of the application startup. This is where you should be showing
your views and starting `Backbone.history`.
```javascript
import Bb from 'backbone';
import { Application } from 'backbone.marionette';
import MyModel from './mymodel';
import MyView from './myview';
const MyApp = Application.extend({
region: '#root-element',
initialize(options) {
console.log('Initialize' + options.foo);
},
onBeforeStart(app, options) {
this.model = new MyModel(options.data);
},
onStart(app, options) {
this.showView(new MyView({model: this.model}));
Bb.history.start();
}
});
const myApp = new MyApp({ foo: 'My App' });
myApp.start({ data: { bar: true } });
```
[Live example](https://jsfiddle.net/marionettejs/ny59rs7b/)
As shown the `options` object is passed into the `Application` as the
second argument to `start`.
#### Application `destroy` events
The `Application` class also triggers [Destroy Events](#destroy-and-beforedestroy-events).
## Behavior Events
### `initialize` event
After the view and behavior are [constructed and initialized](./marionette.behavior.md#events--initialize-order),
the last event to occur is an `initialize` event on the behavior which is passed
the view instance and any options passed to the view at instantiation.
```javascript
import { Behavior, View } from 'backbone.marionette';
const MyBehavior = Behavior.extend({
onInitialize(view, options) {
console.log(options.msg);
}
});
const MyView = View.extend({
behaviors: [MyBehavior]
});
const myView = new MyView({ msg: 'view initialized' });
```
**Note** This event is unique in that the triggering class instance (the view) is not the same instance
as the handler (the behavior). In most cases internally triggered events are triggered and handled by
the same instance, but this is an exception.
### Proxied Events
A `Behavior`'s view events [are proxied directly on the behavior](./marionette.behavior.md#proxy-handlers).
**Note** In order to prevent conflict `Behavior` does not trigger [destroy events](#destroy-and-beforedestroy-events)
with its own destruction. A `destroy` event occurring on the `Behavior` will have originated from the related view.
## Region Events
When you show a view inside a region - either using [`region.show(view)`](./marionette.region.md#showing-a-view) or
[`showChildView('region', view)`](./marionette.view.md#showing-a-view) - the `Region` will emit events around the view
events that you can hook into.
The `Region` class also triggers [Destroy Events](#destroy-and-beforedestroy-events).
### `show` and `before:show` events
These events fire before (`before:show`) and after (`show`) showing anything in a region.
A view may or may not be rendered during `before:show`, but a view will be rendered by `show`.
The `show` events will receive the region instance, the view being shown, and any options passed to `region.show`.
```javascript
import { Region, View } from 'backbone.marionette';
const MyRegion = Region.extend({
onBeforeShow(myRegion, view, options) {
console.log(myRegion.hasView()); //false
console.log(view.isRendered()); // false
console.log(options.foo === 'bar'); // true
},
onShow(myRegion, view, options) {
console.log(myRegion.hasView()); //true
console.log(view.isRendered()); // true
console.log(options.foo === 'bar'); // true
}
});
const MyView = View.extend({
template: _.template('hello')
});
const myRegion = new MyRegion({ el: '#dom-hook' });
myRegion.show(new MyView(), { foo: 'bar' });
```
### `empty` and `before:empty` events
These events fire before (`before:empty`) and after (`empty`) emptying a region's view.
These events will not fire if there is no view in the region, even if the region detaches
DOM from within the region's `el`.
The view will not be detached or destroyed during `before:empty`,
but will be detached or destroyed during the `empty`.
The empty events will receive the region instance, the view leaving the region.
```javascript
import { Region, View } from 'backbone.marionette';
const MyRegion = Region.extend({
onBeforeEmpty(myRegion, view) {
console.log(myRegion.hasView()); //true
console.log(view.isDestroyed()); // false
},
onEmpty(myRegion, view) {
console.log(myRegion.hasView()); //false
console.log(view.isDestroyed()); // true
}
});
const MyView = View.extend({
template: _.template('hello')
});
const myRegion = new MyRegion({ el: '#dom-hook' });
myRegion.empty(); // no events, no view emptied
myRegion.show(new MyView());
myRegion.empty();
```
## MnObject Events
The `MnObject` class triggers [Destroy Events](#destroy-and-beforedestroy-events).
## View Events
### `add:region` and `before:add:region` events
These events fire before (`before:add:region`) and after (`add:region`) a region is added to a view.
This event handler will receive the view instance, the region name string, and the region instance as
event arguments. The region is fully instantiated for both events.
### `remove:region` and `before:remove:region` events
These events fire before (`before:remove:region`) and after (`remove:region`) a region is removed from a view.
This event handler will receive the view instance, the region name string, and the region instance as
event arguments. The region will be not be destroyed in the before event, but is destroyed by `remove:region`.
**Note** Currently these events are only triggered using the `view.removeRegion` API and not when the region
is destroyed directly. https://github.com/marionettejs/backbone.marionette/issues/3602
## CollectionView Events
The `CollectionView` triggers unique events specifically related to child management.
### `add:child` and `before:add:child` events
These events fire before (`before:add:child`) and after (`add:child`) each child view
is instantiated and added to the [`children`](./collectionview.md#collectionviews-children).
These will fire once for each item in the attached collection or for any view added using
[`addChildView`](./collectionview.md#adding-a-child-view).
### `remove:child` and `before:remove:child` events
These events fire before (`before:remove:child`) and after (`remove:child`) each child view
is removed to the [`children`](./collectionview.md#collectionviews-children).
A view may be removed from the `children` if it is destroyed, if it is removed
from the `collection` or if it is removed with [`removeChildView`](./collectionview.md#removing-a-child-view).
**NOTE** A childview may or may not be destroyed by this point.
**NOTE** When a `CollectionView` is destroyed it will not individually remove its `children`.
Each childview will be destroyed, but any needed clean up during the `CollectionView`'s destruction
should happen in [`before:destroy:children`](#destroychildren-and-beforedestroychildren-events).
### `sort` and `before:sort` events
These events fire before (`before:sort`) and after (`sort`) sorting the children in the `CollectionView`.
These events will only fire if there are [`children`](./collectionview.md#collectionviews-children)
and a [`viewComparator`](./collectionview.md#defining-the-viewcomparator)
### `filter` and `before:filter` events
These events fire before (`before:filter`) and after (`filter`) filtering the children in the `CollectionView`.
This event will only fire if there are [`children`](./collectionview.md#collectionviews-children)
and a [`viewFilter`](./collectionview.md#defining-the-viewfilter).
When the `filter` event is fired the children filtered out will have already been
detached from the view's `el`, but new children will not yet have been rendered.
The `filter` event not only receives the view instance, but also arrays of attached views,
and detached views.
```javascript
const MyCollectionView = CollectionView.extend({
onBeforeFilter(myCollectionView) {
console.log('Nothing has changed yet!');
},
onFilter(myCollectionView, attachedViews, detachedViews) {
console.log('Array of attached views', attachedViews);
console.log('Array of detached views', detachedViews);
}
});
```
### `render:children` and `before:render:children` events
Similar to [`Region` `show` and `before:show` events](#show-and-beforeshow-events) these events fire
before (`before:render:children`) and after (`render:children`) the `children` of the `CollectionView`
are attached to the `CollectionView`'s `el` or `childViewContainer`.
These events will be passed the `CollectionView` instance and the array of views being attached.
The views in the array may or may not be rendered or attached for `before:render:children`,
but will be rendered and attached by `render:children`.
If the `CollectionView` can determine that added views will only be appended to the end, only the appended views
will be passed to the event. Otherwise all of the `children` views will be passed.
**Note** if you consistently need all of the views within this event use [`children`](./marionette.collectionview.md#collectionviews-children)
### `destroy:children` and `before:destroy:children` events
These events fire before (`before:destroy:children`) and after (`destroy:children`) destroying the children
in the `CollectionView`. These events will only fire if there are [`children`](./collectionview.md#collectionviews-children).
### CollectionView EmptyView Region Events
The `CollectionView` uses a region internally that can be used to know when the empty view is show or destroyed.
See [Region Events](#region-events).
```javascript
import { CollectionView } from 'backbone.marionette';
const MyView = CollectionView.extend({
emptyView: MyEmptyView
});
const myView = new MyView();
myView.getEmptyRegion().on({
'show'() {
console.log('CollectionView is empty!');
},
'before:empty'() {
if (this.hasView()) {
console.log('CollectionView is removing the emptyView');
}
}
});
myView.render();
```
## DOM Change Events
### `render` and `before:render` events
Reflects when a view's template is being rendered into its `el`.
`before:render` will occur prior to removing any current child views.
`render` is an ideal event for attaching child views to the view's template as the first
render _generally_ occurs prior to the view attaching to the DOM.
```javascript
import { View, CollectionView } from 'backbone.marionette';
import MyChildView from './MyChildView';
const MyView = View.extend({
template: _.template('<div class="foo-region"></div>'),
regions: {
'foo': '.foo-region'
},
onRender() {
this.showChildView('foo', new MyChildView());
}
});
const MyCollectionView = CollectionView.extend({
childView: MyChildView,
onRender() {
// Add a child not from the `collection`
this.addChildView(new MyChildView());
}
})
```
**Note** This event is only triggered when rendering a template into a view. A view that
is pre-rendered will not have this event triggered unless re-rendered. [Pre-rendered views](./dom.prerendered.md)
should use `initialize` for attaching child views and the `render` event if the view is re-rendered.
**Note** If a view's `template` is set to `false` this event will not trigger.
### `attach` and `before:attach` events
Reflects when the `el` of a view is attached to the DOM. These events will not trigger when
a view is re-rendered as the `el` itself does not change.
`attach` is the ideal event to setup any external DOM listeners such as `jQuery` plugins
that use the view's `el`, but _not_ its contents.
### `detach` and `before:detach` events
Reflects when the `el` of a view is detached from the DOM. These events will not trigger when
a view is re-rendered as the `el` itself does not change.
`before:detach` is the ideal event to clean up any external DOM listeners such as `jQuery` plugins
that use the view's `el`, but _not_ its contents.
### `dom:refresh` event
Reflects when the _contents_ of a view's `el` change in the DOM.
This event will fire when the view is first [`attach`ed](#attach-and-beforeattach-events).
It will also fire if an attached view is re-rendered.
This is the ideal event to setup any external DOM listeners such as `jQuery` plugins
that use DOM _within_ the `el` of the view and not the view's `el` itself.
**NOTE** This event will not fire if the view has no template to render unless it contains
prerendered html.
### `dom:remove` event
Reflects when the _contents_ of a view's `el` are about to change in the DOM.
This event will fire when the view is about to be [`detach`ed](#detach-and-beforedetach-events).
It will also fire before an attached view is re-rendered.
This is the ideal event to clean up any external DOM listeners such as `jQuery` plugins
that use DOM _within_ the `el` of the view and not the view's `el` itself.
**NOTE** This event will not fire if the view has no template to render unless it contains
prerendered html.
### Advanced Event Settings
Marionette is able to trigger `attach`/`detach` events down the view tree along with
triggering the `dom:refresh`/`dom:remove` events because of the view event monitor.
This monitor starts when a view is created or shown in a region (to handle non-Marionette views).
In some cases it may be a useful performance improvement to disable this functionality.
Doing so is as easy as setting `monitorViewEvents: false` on the view class.
```javascript
import { View } from 'backbone.marionette';
const NonMonitoredView = View.extend({
monitorViewEvents: false
});
```
**Note**: Disabling the view monitor will break the monitor generated events for this view
_and all child views_ of this view. Disabling should be done carefully.
## Destroy Events
### `destroy` and `before:destroy` events
Every class has a `destroy` method which can be used to clean up the instance.
With the exception of `Behavior`'s each of these methods triggers a `before:destroy`
and a `destroy` event.
As a general rule, `onBeforeDestroy` is the best handler for cleanup as the instance
and any internally created children are already destroyed by the time `onDestroy` is called.
**Note** For views this is not the ideal location for clean up of anything touching the DOM.
See [`dom:remove`](#domremove-event) or [`before:detach`] for DOM related clean up.
```javascript
import { Application, View } from 'backbone.marionette';
const MyView = View.extend({
onBeforeDestroy(options) {
console.log(options.foo);
}
});
const myView = new MyView();
mvView.destroy({ foo: 'destroy view' });
const MyApp = Application.extend({
onBeforeDestroy(options) {
console.log(options.foo);
}
});
const myApp = new MyApp();
myApp.destroy({ foo: 'destroy app' });
```
#### `CollectionView` `destroy:children` and `before:destroy:children` events
Similar to `destroy`, `CollectionView` has events for when all of its children
are destroyed. See [the CollectionView's events](#destroychildren-and-beforedestroychildren-events)
for more information.
## Supporting Backbone Views
### `Marionette.Events` and `triggerMethod`
Internally Marionette uses [`triggerMethod`](./common.md#triggermethod) for event triggering.
This API is not available to `Backbone.View`s so in order to support `Backbone.View`s in Marionette v4+,
`Marionette.Events` must be mixed into the non-Marionette view.
This can be done for an individual view definition:
```javascript
import { Events } from 'backbone.marionette';
const MyBbView = Backbone.View.extend(Events);
```
or for all `Backbone.View`s
```javascript
_.extend(Backbone.View.prototype, Events);
```
### Lifecycle Events
#### `render` and `destroy`
To support non-Marionette Views, Marionette uses two flags to determine if it should trigger
`render` and `destroy` events on the view. If a custom view throws it's own `render` or `destroy`
events, the related flag should be set to `true` to avoid Marionette duplicating these events.
```javascript
// Add support for triggerMethod
import { Events } from 'backbone.marionette';
_.extend(Backbone.View.prototype, Events);
const MyCustomView = Backbone.View.extend({
supportsRenderLifecycle: true,
supportsDestroyLifecycle: true,
render() {
this.triggerMethod('before:render');
this.$el.html('render html');
// Since render is being triggered here set the
// supportsRenderLifecycle flag to true to avoid duplication
this.triggerMethod('render');
},
destroy() {
this.triggerMethod('before:destroy');
this.remove();
// Since destroy is being triggered here set the
// supportsDestroyLifecycle flag to true to avoid duplication
this.triggerMethod('destroy');
}
});
```
#### DOM Change Lifecycle Events
As mentioned in [Advanced Event Settings](#advanced-event-settings) some DOM events
are triggers from the view event monitor that will handle DOM attachment related events
down the view tree. Backbone View's won't have the functionality unless the monitor is
added. This will include all [DOM Change Events](#dom-change-events) other than render.
You can add the view events monitor to any non-Marionette view:
```javascript
import { monitorViewEvents, Events } from 'backbone.marionette';
// Add support for triggerMethod
_.extend(Backbone.View.prototype, Events);
const MyCustomView = Backbone.View.extend({
initialize() {
monitorViewEvents(this);
// Ideally this happens first prior to any rendering
// or attaching that might occur in the initialize
}
});
```
================================================
FILE: docs/events.entity.md
================================================
# Entity events
The [`View`, `CollectionView` and `Behavior`](./classes.md) can bind to events that occur on attached models and
collections - this includes both [standard backbone-events](http://backbonejs.org/#Events-catalog) and custom events.
Event handlers are called with the same arguments as if listening to the entity directly
and called with the context of the view instance.
### Model Events
For example, to listen to a model's events:
```javascript
import { View } from 'backbone.marionette';
const MyView = View.extend({
modelEvents: {
'change:attribute': 'onChangeAttribute'
},
onChangeAttribute(model, value) {
console.log('New value: ' + value);
}
});
```
[Live example](https://jsfiddle.net/marionettejs/auvk4hps/)
The `modelEvents` attribute passes through all the arguments that are passed
to `model.trigger('event', arguments)`.
The `modelEvents` attribute can also take a
[function returning an object](basics.md#functions-returning-values).
#### Function Callback
You can also bind a function callback directly in the `modelEvents` attribute:
```javascript
import { View } from 'backbone.marionette';
const MyView = View.extend({
modelEvents: {
'change:attribute'() {
console.log('attribute was changed');
}
}
});
```
[Live example](https://jsfiddle.net/marionettejs/zaxLe6au/)
### Collection Events
Collection events work exactly the same way as [`modelEvents`](#model-events)
with their own `collectionEvents` key:
```javascript
import { View } from 'backbone.marionette';
const MyView = View.extend({
collectionEvents: {
sync: 'onSync'
},
onSync(collection) {
console.log('Collection was synchronised with the server');
}
});
```
[Live example](https://jsfiddle.net/marionettejs/7qyfeh9r/)
The `collectionEvents` attribute can also take a
[function returning an object](basics.md#functions-returning-values).
Just as in `modelEvents`, you can bind function callbacks directly inside the
`collectionEvents` object:
```javascript
import { View } from 'backbone.marionette';
const MyView = View.extend({
collectionEvents: {
'update'() {
console.log('the collection was updated');
}
}
});
```
[Live example](https://jsfiddle.net/marionettejs/ze8po0x5/)
### Listening to Both
If your view has a `model` and `collection` attached, it will listen for events
on both:
```javascript
import { View } from 'backbone.marionette';
const MyView = View.extend({
modelEvents: {
'change:someattribute': 'onChangeSomeattribute'
},
collectionEvents: {
'update': 'onCollectionUpdate'
},
onChangeSomeattribute() {
console.log('someattribute was changed');
},
onCollectionUpdate() {
console.log('models were added or removed in the collection');
}
});
```
[Live example](https://jsfiddle.net/marionettejs/h9ub5hp3/)
In this case, Marionette will bind event handlers to both.
================================================
FILE: docs/events.md
================================================
# Marionette Events
The Marionette Event system provides a system for objects to communicate with
each other in a uniform way. In Marionette, this involves one object triggering
an event that another listens to. This is an extended from of the
[event handling system in Backbone](http://backbonejs.org/#Events), and is
different than [DOM related events](./dom.interactions.md#binding-to-user-input).
It is mixed in to every [Marionette class](./classes.md).
## Documentation Index
* [Triggering and Listening to Events](#triggering-and-listening-to-events)
* [`triggerMethod`](#triggermethod)
* [Listening to Events](#listening-to-events)
* [`onEvent` Binding](#onevent-binding)
* [View events and triggers](#view-events-and-triggers)
* [View entity events](#view-entity-events)
* [Child View Events](#child-view-events)
* [Event Bubbling](#event-bubbling)
* [Using CollectionView](#using-collectionview)
* [A Child View's Event Prefix](#a-child-views-event-prefix)
* [Explicit Event Listeners](#explicit-event-listeners)
* [Attaching Functions](#attaching-functions)
* [Using `CollectionView`'s `childViewEvents`](#using-collectionviews-childviewevents)
* [Triggering Events on Child Events](#triggering-events-on-child-events)
* [Using `CollectionView`'s `childViewTriggers`](#using-collectionviews-childviewtriggers)
* [Lifecycle Events](#lifecycle-events)
## Triggering and Listening to Events
The traditional [event handling system in Backbone](http://backbonejs.org/#Events)
is fully supported in Marionette. Marionette, however, provides an additional
event API using the `triggerMethod` method - the key difference between the two
is that `triggerMethod` automatically calls specially named event handlers.
### `triggerMethod`
Just like `Backbone`'s [`trigger`](http://backbonejs.org/#Events-trigger) the
`triggerMethod` method fires the named event on the instance - any listeners will then
be triggered on the event. If there are no listeners, this call will still succeed.
All arguments after the first event name string will be passed to all event handlers.
```javascript
import { View } from 'backbone.marionette';
const MyView = View.extend({
callMethod(myString) {
console.log(myString + ' was passed');
}
});
const myView = new MyView();
/* See Backbone.listenTo */
myView.on('something:happened', myView.callMethod);
/* Calls callMethod('foo'); */
myView.triggerMethod('something:happened', 'foo');
```
[Live example](https://jsfiddle.net/marionettejs/whvgao7o/)
**The `triggerMethod` method is available to [all Marionette classes](./common.md#triggermethod).**
### Listening to Events
Marionette's event triggers work just like regular Backbone events - you can
use `myView.on` and `myObject.listenTo` to act on events:
```javascript
import { View } from 'backbone.marionette';
const MyView = View.extend({
initialize() {
this.on('event:happened', this.logCall);
},
logCall(myVal) {
console.log(myVal);
}
});
```
[Live example](https://jsfiddle.net/marionettejs/90Larbty/)
You can also use `listenTo` as in Backbone:
```javascript
import { View } from 'backbone.marionette';
const OtherView = View.extend({
initialize(someView) {
this.listenTo(someView, 'event:happened', this.logCall);
},
logCall(myVal) {
console.log(myVal);
}
});
const MyView = View.extend();
const myView = new MyView();
const otherView = new OtherView(myView);
myView.triggerMethod('event:happened', 'someValue'); // Logs 'someValue'
```
[Live examples](https://jsfiddle.net/marionettejs/cm2rczqz/)
As in [Backbone](http://backbonejs.org/#Events), `listenTo` will pass the object
it is called on in as the context variable. These behave exactly as in Backbone,
so using `object.on` will require you to unhook any event handlers yourself to
prevent memory leaks. Marionette, however, does provide extra helpers as part of
the view lifecycle that bind and unbind event handlers for you. this is the
core of `onEvent` Binding.
#### `onEvent` Binding
The major difference between `Backbone.trigger` and `triggerMethod` is
that `triggerMethod` can fire specially named events on the instance. For
example, a view that has been rendered will internally fire `view.triggerMethod('render')`
and call `onRender` - providing a handy way to add behavior to your views.
Determining what method an event will call is easy, we will outline this with an
example using `before:dom:refresh` though this also works with any custom events
you want to fire:
1. Split the words around the `:` characters - so `before`, `dom`, `refresh`
2. Capitalize the first letter of each word - `Before`, `Dom`, `Refresh`
3. Add a leading `on` - `on`, `Before`, `Dom`, `Refresh`
4. Mash it into a single call - `onBeforeDomRefresh`
Using this process, `before:dom:refresh` will call the `onBeforeDomRefresh`
method. Let's see it in action with a custom event:
```javascript
import { View } from 'backbone.marionette';
const MyView = View.extend({
onMyEvent(myVal) {
console.log(myVal);
}
});
const myView = new MyView();
myView.triggerMethod('my:event', 'someValue'); // Logs 'someValue'
```
[Live example](https://jsfiddle.net/marionettejs/oc8wwcnx/)
As before, all arguments passed into `triggerMethod` after the event name will make
their way into the event handler. Using this method ensures there will be no unexpected
memory leaks.
### View `events` and `triggers`
Views can automatically bind DOM events to methods and View events with [`events`](./dom.interactions.md#view-events)
and [`triggers`](./dom.interactions.md#view-triggers) respectively:
```javascript
import { View } from 'backbone.marionette';
const MyView = View.extend({
events: {
'click a': 'showModal'
},
triggers: {
'keyup input': 'data:entered'
},
showModal(event) {
console.log('Show the modal');
},
onDataEntered(view, event) {
console.log('Data was entered');
}
});
```
[Live example](https://jsfiddle.net/marionettejs/pq4xfchk/)
For more information, see the [DOM interactions documentation](./dom.interactions.md#binding-to-user-input).
### View entity events
Views can automatically bind to its model or collection with [`modelEvents`](./events.entity.md#model-events)
and [`collectionEvents`](./events.entity.md#collection-events) respectively.
```javascript
import { View } from 'backbone.marionette';
const MyView = View.extend({
modelEvents: {
'change:someattribute': 'onChangeSomeattribute'
},
collectionEvents: {
'update': 'onCollectionUpdate'
},
onChangeSomeattribute() {
console.log('someattribute was changed');
},
onCollectionUpdate() {
console.log('models were added or removed in the collection');
}
});
```
[Live example](https://jsfiddle.net/marionettejs/h9ub5hp3/)
For more information, see the [Entity events documentation](./events.entity.md).
## Child View Events
The [`View`](marionette.view.md) and [`CollectionView`](marionette.collectionview.md)
are able to monitor and act on events on any of their direct children. Any events fired
on a view are automatically propagated to their direct parents as well. Let's
see a quick example:
```javascript
import { View, CollectionView } from 'backbone.marionette';
const Item = View.extend({
tagName: 'li',
triggers: {
'click a': 'select:item'
}
});
const Collection = CollectionView.extend({
tagName: 'ul',
childViewEvents: {
'select:item': 'itemSelected'
},
itemSelected(childView) {
console.log('item selected: ' + childView.model.id);
}
});
```
[Live example](https://jsfiddle.net/marionettejs/opyfvsfx/)
### Event Bubbling
Events fired on a view bubble up to their direct parent views, calling any
event methods using the `childview:` prefix (more on that shortly) and any
methods bound to the `childViewEvents` attribute. This works for built-in
events, custom events fired with `triggerMethod` and bound events using
`triggers`.
**NOTE** Automatic event bubbling can be disabled by setting
[`childViewEventPrefix`](#a-child-views-event-prefix) to `false`.
When using implicit listeners, the [`childview:*` event prefix](#a-child-views-event-prefix) is used which
needs to be included as part of the handler:
```javascript
import { View, } from 'backbone.marionette';
const MyView = View.extend({
triggers: {
click: 'click:view'
},
doSomething() {
this.triggerMethod('did:something', this);
}
});
const ParentView = View.extend({
regions: {
foo: '.foo-hook'
},
onRender() {
this.showChildView('foo', new MyView());
},
onChildviewClickView(childView) {
console.log('View clicked ' + childView);
},
onChildviewDidSomething(childView) {
console.log('Something was done to ' + childView);
}
})
```
**NOTE** `triggers` will automatically pass the child view as an argument to the parent view, however `triggerMethod` will not, and so notice that in the above example, the `triggerMethod` explicitly passes the child view.
[Live example](https://jsfiddle.net/marionettejs/oquea4uy/)
#### Using `CollectionView`
This works exactly the same way for the `CollectionView` and its `childView`:
```javascript
import { View, CollectionView } from 'backbone.marionette';
const MyChild = View.extend({
triggers: {
click: 'click:child'
}
});
const MyList = CollectionView.extend({
onChildviewClickChild(childView) {
console.log('Childview ' + childView + ' was clicked');
}
});
```
[Live examples](https://jsfiddle.net/marionettejs/za27jys1/)
### A Child View's Event Prefix
You can customize the event prefix for events that are forwarded
through the view. To do this, set the `childViewEventPrefix`
on the view or collectionview. For more information on the `childViewEventPrefix` see
[Event bubbling](#event-bubbling).
The default value for `childViewEventPrefix` is `false`. Setting this property to
`false` will disable [automatic event bubbling](#event-bubbling).
```javascript
import Backbone from 'backbone';
import { CollectionView } from 'backbone.marionette';
import MyChildView from './my-child-view';
const myCollection = new Backbone.Collection([{}]);
const CollectionView = CollectionView.extend({
childViewEventPrefix: 'some:prefix',
childView: MyChildView
});
const collectionView = new CollectionView({
collection: myCollection
});
collectionView.on('some:prefix:render', function(){
// child view was rendered
});
collectionView.render();
```
[Live example](https://jsfiddle.net/marionettejs/as33hnk1/)
The `childViewEventPrefix` can be provided in the view definition or
in the constructor function call, to get a view instance.
### Explicit Event Listeners
To call specific functions on event triggers, use the `childViewEvents`
attribute to map child events to methods on the parent view. This takes events
fired on child views - _without the `childview:` prefix_ - and calls the
method referenced or attached function.
```javascript
import { View } from 'backbone.marionette';
const MyView = View.extend({
triggers: {
click: 'view:clicked'
}
});
const ParentView = View.extend({
regions: {
foo: '.foo-hook'
},
childViewEvents: {
'view:clicked': 'displayMessage'
},
onRender() {
this.showChildView('foo', new MyView());
},
displayMessage(childView) {
console.log('Displaying message for ' + childView);
}
});
```
[Live example](https://jsfiddle.net/marionettejs/y92r99p2/)
#### Attaching Functions
The `childViewEvents` attribute can also attach functions directly to be event
handlers:
```javascript
import { View } from 'backbone.marionette';
const MyView = View.extend({
triggers: {
click: 'view:clicked'
}
});
const ParentView = View.extend({
regions: {
foo: '.foo-hook'
},
childViewEvents: {
'view:clicked'(childView) {
console.log('Function called for ' + childView);
}
},
onRender() {
this.showChildView('foo', new MyView());
}
});
```
[Live example](https://jsfiddle.net/marionettejs/pnp1dd8j/)
#### Using `CollectionView`'s `childViewEvents`
```javascript
import { CollectionView } from 'backbone.marionette';
// childViewEvents can be specified as a hash...
const MyCollectionView = CollectionView.extend({
childViewEvents: {
// This callback will be called whenever a child is rendered or emits a `render` event
render() {
console.log('A child view has been rendered.');
}
}
});
```
[Live example](https://jsfiddle.net/marionettejs/a2uvcfrp/)
### Triggering Events on Child Events
A `childViewTriggers` hash or method permits proxying of child view events without manually
setting bindings. The values of the hash should be a string of the event to trigger on the parent.
`childViewTriggers` is sugar on top of [`childViewEvents`](#explicit-event-listeners) much
in the same way that [view `triggers`](./dom.interaction.md#view-triggers) are sugar for [view `events`](./dom.interactions.md#view-events).
```javascript
import { View, CollectionView } from 'backbone.marionette';
// The child view fires a custom event, `show:message`
const ChildView = View.extend({
// Events hash defines local event handlers that in turn may call `triggerMethod`.
events: {
'click .button': 'onClickButton'
},
triggers: {
'submit form': 'submit:form'
},
onClickButton () {
// Both `trigger` and `triggerMethod` events will be caught by parent.
this.trigger('show:message', 'foo');
this.triggerMethod('show:message', 'bar');
}
});
// The parent uses childViewEvents to catch the child view's custom event
const ParentView = CollectionView.extend({
childView: ChildView,
childViewTriggers: {
'show:message': 'child:show:message',
'submit:form': 'child:submit:form'
},
onChildShowMessage (message) {
console.log('A child view fired show:message with ' + message);
},
onChildSubmitForm (childView) {
console.log('A child view fired submit:form');
}
});
const GrandParentView = View.extend({
regions: {
list: '.list'
},
onRender() {
this.showChildView('list', new ParentView({
collection: this.collection
}));
},
childViewEvents: {
'child:show:message': 'showMessage'
},
showMessage(childView) {
console.log('A child (' + childView + ') fired an event');
}
});
```
[Live example](https://jsfiddle.net/marionettejs/8eq7vca5/)
#### Using `CollectionView`'s `childViewTriggers`
```javascript
import { View, CollectionView } from 'backbone.marionette';
// The child view fires a custom event, `show:message`
const ChildView = View.extend({
// Events hash defines local event handlers that in turn may call `triggerMethod`.
events: {
'click .button': 'onClickButton'
},
// Triggers hash converts DOM events directly to view events catchable on the parent.
// Note that `triggers` automatically pass the first argument as the child view.
triggers: {
'submit form': 'submit:form'
},
onClickButton () {
// Both `trigger` and `triggerMethod` events will be caught by parent.
this.trigger('show:message', 'foo');
this.triggerMethod('show:message', 'bar');
}
});
// The parent uses childViewEvents to catch the child view's custom event
const ParentView = CollectionView.extend({
childView: ChildView,
childViewTriggers: {
'show:message': 'child:show:message',
'submit:form': 'child:submit:form'
},
onChildShowMessage (message) {
console.log('A child view fired show:message with ' + message);
},
onChildSubmitForm (childView) {
console.log('A child view fired submit:form');
}
});
```
[Live example](https://jsfiddle.net/marionettejs/edhqd2h8/)
## Lifecycle Events
Marionette Views fire events during their creation and destruction lifecycle.
For more information see the documentation covering the
[`View` Lifecycle](./view.lifecycle.md).
================================================
FILE: docs/features.md
================================================
# Features
Marionette Features are opt-in functionality that you can enable by utilizing [`setEnabled`](#setting-a-feature-flag) in your app.
It is a good practice to set these flags only once prior to instantiating any Marionette class.
## Documentation Index
* [Goals](#goals)
* [Checking a Feature Flag state](#checking-a-feature-flag-state)
* [Setting a Feature Flag](#setting-a-feature-flag)
* [Current Features](#current-features)
## Goals:
+ make it possible to add breaking changes in a minor release
+ give community members a chance to provide feedback for new functionality
## Checking a Feature Flag State
Use `isEnabled` if you need to know the state of a feature flag programmatically.
```javascript
import { isEnabled } from 'backbone.marionette';
isEnabled('fooFlag'); // false
```
## Setting a Feature Flag
Use `setEnabled` to change the value of a flag.
While setting a flag at any point may work, these flags are designed to be set before
any functionality of Marionette is used. Change flags after at your own risk.
```javascript
import { setEnabled } from 'backbone.marionette';
setEnabled('fooFlag', true);
const myApp = new MyApp({
region: '#app-hook'
});
myApp.start();
```
## Current Features
### `childViewEventPrefix`
*Default:* `false`
This flag indicates whether [`childViewEventPrefix`](./events.md#a-child-views-event-prefix)
for all views will return the default value of `'childview'` or if it will return `false`
disabling [automatic event bubbling](./events.md#event-bubbling).
### `triggersPreventDefault`
*Default:* `true`
It indicates the whether or not [`View.triggers` will call `event.preventDefault()`](./dom.interactions.md#view-triggers-event-object) if not explicitly defined by the trigger.
The default has been true, but for a future version [`false` is being considered](https://github.com/marionettejs/backbone.marionette/issues/2926).
### `triggersStopPropagating`
*Default:* `true`
It in
gitextract_hmkqpmmu/ ├── .babelrc ├── .editorconfig ├── .eslintrc ├── .gitignore ├── .npmignore ├── .travis.yml ├── CONTRIBUTING.md ├── ISSUE_TEMPLATE.md ├── PULL_REQUEST_TEMPLATE.md ├── bower.json ├── changelog.md ├── docs/ │ ├── backbone.radio.md │ ├── basics.md │ ├── classes.md │ ├── common.md │ ├── dom.api.md │ ├── dom.interactions.md │ ├── dom.prerendered.md │ ├── events.class.md │ ├── events.entity.md │ ├── events.md │ ├── features.md │ ├── installation.md │ ├── marionette.application.md │ ├── marionette.behavior.md │ ├── marionette.collectionview.md │ ├── marionette.mnobject.md │ ├── marionette.region.md │ ├── marionette.view.md │ ├── readme.md │ ├── routing.md │ ├── upgrade-v2-v3.md │ ├── upgrade-v3-v4.md │ ├── utils.md │ ├── view.lifecycle.md │ └── view.rendering.md ├── lib/ │ ├── backbone.marionette.esm.js │ └── backbone.marionette.js ├── license.txt ├── package.json ├── readme.md ├── rollup.config.js ├── src/ │ ├── application.js │ ├── backbone.marionette.js │ ├── behavior.js │ ├── child-view-container.js │ ├── collection-view.js │ ├── common/ │ │ ├── bind-events.js │ │ ├── bind-requests.js │ │ ├── build-region.js │ │ ├── get-option.js │ │ ├── merge-options.js │ │ ├── monitor-view-events.js │ │ ├── normalize-methods.js │ │ ├── trigger-method.js │ │ └── view.js │ ├── config/ │ │ ├── dom.js │ │ ├── features.js │ │ └── renderer.js │ ├── mixins/ │ │ ├── behaviors.js │ │ ├── common.js │ │ ├── delegate-entity-events.js │ │ ├── destroy.js │ │ ├── events.js │ │ ├── radio.js │ │ ├── regions.js │ │ ├── template-render.js │ │ ├── triggers.js │ │ ├── ui.js │ │ └── view.js │ ├── object.js │ ├── region.js │ ├── utils/ │ │ ├── deprecate.js │ │ ├── error.js │ │ ├── extend.js │ │ ├── get-namespaced-event-name.js │ │ ├── invoke.js │ │ └── proxy.js │ └── view.js ├── test/ │ ├── .eslintrc │ ├── .globals.json │ ├── .mocharc.json │ ├── browsersync.html │ ├── rollup.config.js │ ├── runner.html │ ├── setup/ │ │ ├── browser.js │ │ ├── node.js │ │ └── setup.js │ └── unit/ │ ├── README.md │ ├── application.spec.js │ ├── backbone.marionette.spec.js │ ├── behavior.spec.js │ ├── child-view-container.spec.js │ ├── collection-view/ │ │ ├── collection-view-children.spec.js │ │ ├── collection-view-childviewcontainer.sepc.js │ │ ├── collection-view-data.spec.js │ │ ├── collection-view-empty.spec.js │ │ ├── collection-view-filtering.spec.js │ │ ├── collection-view-sorting.spec.js │ │ ├── collection-view-viewmixin.spec.js │ │ └── collection-view.spec.js │ ├── common/ │ │ ├── bind-events.spec.js │ │ ├── bind-request.spec.js │ │ ├── build-region.spec.js │ │ ├── get-option.spec.js │ │ ├── merge-options.spec.js │ │ ├── monitor-view-events.js │ │ ├── normalize-methods.spec.js │ │ ├── trigger-method.spec.js │ │ └── view.spec.js │ ├── config/ │ │ ├── dom.js │ │ ├── features.spec.js │ │ └── renderer.spec.js │ ├── destroying-views.spec.js │ ├── get-immediate-children.spec.js │ ├── mixins/ │ │ ├── behaviors.spec.js │ │ ├── common.spec.js │ │ ├── delegate-entity-events.spec.js │ │ ├── destroy.spec.js │ │ ├── radio.spec.js │ │ ├── template-render.spec.js │ │ ├── ui.spec.js │ │ └── view.spec.js │ ├── object.spec.js │ ├── on-attach.spec.js │ ├── on-dom-refresh.spec.js │ ├── on-dom-remove.spec.js │ ├── region.spec.js │ ├── utils/ │ │ ├── deprecate.spec.js │ │ ├── error.spec.js │ │ ├── get-namespaced-event-name.spec.js │ │ └── proxy.spec.js │ ├── view.child-views.spec.js │ ├── view.dynamic-regions.spec.js │ ├── view.renderer.js │ ├── view.spec.js │ ├── view.triggers.spec.js │ ├── view.ui-bindings.spec.js │ └── view.ui-event-and-triggers.spec.js ├── trigger-deploy-mn-com.js └── upgradeGuide.md
SYMBOL INDEX (347 symbols across 45 files)
FILE: lib/backbone.marionette.esm.js
function normalizeBindings (line 72) | function normalizeBindings(context, bindings) {
function bindEvents (line 83) | function bindEvents(entity, bindings) {
function unbindEvents (line 92) | function unbindEvents(entity, bindings) {
function normalizeBindings$1 (line 108) | function normalizeBindings$1(context, bindings) {
function bindRequests (line 119) | function bindRequests(channel, bindings) {
function unbindRequests (line 128) | function unbindRequests(channel, bindings) {
function triggerMethodChildren (line 176) | function triggerMethodChildren(view, event, shouldTrigger) {
function shouldTriggerAttach (line 190) | function shouldTriggerAttach(view) {
function shouldAttach (line 194) | function shouldAttach(view) {
function shouldTriggerDetach (line 203) | function shouldTriggerDetach(view) {
function shouldDetach (line 207) | function shouldDetach(view) {
function triggerDOMRefresh (line 212) | function triggerDOMRefresh(view) {
function triggerDOMRemove (line 218) | function triggerDOMRemove(view) {
function handleBeforeAttach (line 224) | function handleBeforeAttach() {
function handleAttach (line 228) | function handleAttach() {
function handleBeforeDetach (line 233) | function handleBeforeDetach() {
function handleDetach (line 238) | function handleDetach() {
function handleBeforeRender (line 242) | function handleBeforeRender() {
function handleRender (line 246) | function handleRender() {
function monitorViewEvents (line 252) | function monitorViewEvents(view) {
function getEventName (line 275) | function getEventName(match, prefix, eventName) {
function triggerMethod (line 294) | function triggerMethod(event) {
function getBehaviorClass (line 430) | function getBehaviorClass(options) {
function parseBehaviors (line 455) | function parseBehaviors(view, behaviors, allBehaviors) {
function isEnabled (line 669) | function isEnabled(name) {
function setEnabled (line 673) | function setEnabled(name, state) {
function buildViewTrigger (line 679) | function buildViewTrigger(view, triggerDef) {
function _getEl (line 851) | function _getEl(el) {
function setDomApi (line 856) | function setDomApi(mixin) {
function renderView (line 1145) | function renderView(view) {
function destroyView (line 1161) | function destroyView(view, disableDetachEvents) {
function buildRegion (line 1625) | function buildRegion (definition, defaults) {
function buildRegionFromObject (line 1652) | function buildRegionFromObject(defaults, definition) {
function setRenderer (line 1797) | function setRenderer(renderer) {
function childReducer (line 1805) | function childReducer(children, region) {
function stringComparator (line 1903) | function stringComparator(comparator, view) {
FILE: lib/backbone.marionette.js
function normalizeBindings (line 96) | function normalizeBindings(context, bindings) {
function bindEvents (line 107) | function bindEvents(entity, bindings) {
function unbindEvents (line 116) | function unbindEvents(entity, bindings) {
function normalizeBindings$1 (line 132) | function normalizeBindings$1(context, bindings) {
function bindRequests (line 143) | function bindRequests(channel, bindings) {
function unbindRequests (line 152) | function unbindRequests(channel, bindings) {
function triggerMethodChildren (line 200) | function triggerMethodChildren(view, event, shouldTrigger) {
function shouldTriggerAttach (line 214) | function shouldTriggerAttach(view) {
function shouldAttach (line 218) | function shouldAttach(view) {
function shouldTriggerDetach (line 227) | function shouldTriggerDetach(view) {
function shouldDetach (line 231) | function shouldDetach(view) {
function triggerDOMRefresh (line 236) | function triggerDOMRefresh(view) {
function triggerDOMRemove (line 242) | function triggerDOMRemove(view) {
function handleBeforeAttach (line 248) | function handleBeforeAttach() {
function handleAttach (line 252) | function handleAttach() {
function handleBeforeDetach (line 257) | function handleBeforeDetach() {
function handleDetach (line 262) | function handleDetach() {
function handleBeforeRender (line 266) | function handleBeforeRender() {
function handleRender (line 270) | function handleRender() {
function monitorViewEvents (line 276) | function monitorViewEvents(view) {
function getEventName (line 299) | function getEventName(match, prefix, eventName) {
function triggerMethod (line 318) | function triggerMethod(event) {
function getBehaviorClass (line 454) | function getBehaviorClass(options) {
function parseBehaviors (line 479) | function parseBehaviors(view, behaviors, allBehaviors) {
function isEnabled (line 693) | function isEnabled(name) {
function setEnabled (line 697) | function setEnabled(name, state) {
function buildViewTrigger (line 703) | function buildViewTrigger(view, triggerDef) {
function _getEl (line 875) | function _getEl(el) {
function setDomApi (line 880) | function setDomApi(mixin) {
function renderView (line 1169) | function renderView(view) {
function destroyView (line 1185) | function destroyView(view, disableDetachEvents) {
function buildRegion (line 1649) | function buildRegion (definition, defaults) {
function buildRegionFromObject (line 1676) | function buildRegionFromObject(defaults, definition) {
function setRenderer (line 1821) | function setRenderer(renderer) {
function childReducer (line 1829) | function childReducer(children, region) {
function stringComparator (line 1927) | function stringComparator(comparator, view) {
FILE: src/application.js
method initialize (line 37) | initialize() {}
method start (line 40) | start(options) {
method _initRegion (line 48) | _initRegion() {
method getRegion (line 60) | getRegion() {
method showView (line 64) | showView(view, ...args) {
method getView (line 70) | getView() {
FILE: src/behavior.js
method initialize (line 59) | initialize() {}
method $ (line 64) | $() {
method destroy (line 69) | destroy() {
method proxyViewProperties (line 79) | proxyViewProperties() {
method bindUIElements (line 86) | bindUIElements() {
method unbindUIElements (line 92) | unbindUIElements() {
method getUI (line 98) | getUI(name) {
method delegateEntityEvents (line 103) | delegateEntityEvents() {
method undelegateEntityEvents (line 109) | undelegateEntityEvents() {
method _getEvents (line 115) | _getEvents() {
method _getTriggers (line 135) | _getTriggers() {
FILE: src/child-view-container.js
function stringComparator (line 24) | function stringComparator(comparator, view) {
method _init (line 34) | _init() {
method _add (line 45) | _add(view, index = this._views.length) {
method _addViewIndexes (line 54) | _addViewIndexes(view) {
method _sort (line 65) | _sort(comparator, context) {
method _sortBy (line 79) | _sortBy(comparator) {
method _set (line 89) | _set(views, shouldReset) {
method _swap (line 105) | _swap(view1, view2) {
method findByModel (line 120) | findByModel(model) {
method findByModelCid (line 125) | findByModelCid(modelCid) {
method findByIndex (line 130) | findByIndex(index) {
method findIndexByView (line 135) | findIndexByView(view) {
method findByCid (line 140) | findByCid(cid) {
method hasView (line 144) | hasView(view) {
method _remove (line 149) | _remove(view) {
method _updateLength (line 169) | _updateLength() {
FILE: src/collection-view.js
method constructor (line 46) | constructor(options) {
method _initChildViewStorage (line 67) | _initChildViewStorage() {
method getEmptyRegion (line 73) | getEmptyRegion() {
method _initialEvents (line 89) | _initialEvents() {
method _onCollectionSort (line 101) | _onCollectionSort(collection, { add, merge, remove }) {
method _onCollectionReset (line 115) | _onCollectionReset() {
method _onCollectionUpdate (line 124) | _onCollectionUpdate(collection, options) {
method _removeChildModels (line 140) | _removeChildModels(models) {
method _removeChildModel (line 150) | _removeChildModel(model) {
method _removeChild (line 158) | _removeChild(view) {
method _addChildModels (line 168) | _addChildModels(models) {
method _addChildModel (line 172) | _addChildModel(model) {
method _createChildView (line 180) | _createChildView(model) {
method _addChild (line 188) | _addChild(view, index) {
method _getChildView (line 202) | _getChildView(child) {
method _getView (line 228) | _getView(view, child) {
method _getChildViewOptions (line 236) | _getChildViewOptions(child) {
method buildChildView (line 246) | buildChildView(child, ChildViewClass, childViewOptions) {
method _setupChildView (line 251) | _setupChildView(view) {
method _getImmediateChildren (line 265) | _getImmediateChildren() {
method setElement (line 272) | setElement() {
method render (line 281) | render() {
method _getChildViewContainer (line 308) | _getChildViewContainer() {
method sort (line 322) | sort() {
method _sortChildren (line 331) | _sortChildren() {
method setComparator (line 350) | setComparator(comparator, {preventRender} = {}) {
method removeComparator (line 364) | removeComparator(options) {
method getComparator (line 371) | getComparator() {
method _viewComparator (line 383) | _viewComparator(view) {
method filter (line 388) | filter() {
method _filterChildren (line 398) | _filterChildren() {
method _getFilter (line 432) | _getFilter() {
method getFilter (line 465) | getFilter() {
method setFilter (line 471) | setFilter(filter, {preventRender} = {}) {
method removeFilter (line 485) | removeFilter(options) {
method _detachChildren (line 489) | _detachChildren(detachingViews) {
method _detachChildView (line 493) | _detachChildView(view) {
method detachHtml (line 510) | detachHtml(view) {
method _renderChildren (line 514) | _renderChildren() {
method _getBuffer (line 541) | _getBuffer(views) {
method _attachChildren (line 554) | _attachChildren(els, views) {
method attachHtml (line 575) | attachHtml(els, $container) {
method isEmpty (line 579) | isEmpty() {
method _showEmptyView (line 583) | _showEmptyView() {
method _getEmptyView (line 598) | _getEmptyView() {
method _destroyEmptyView (line 607) | _destroyEmptyView() {
method _getEmptyViewOptions (line 617) | _getEmptyViewOptions() {
method swapChildViews (line 627) | swapChildViews(view1, view2) {
method addChildView (line 650) | addChildView(view, index, options = {}) {
method detachChildView (line 702) | detachChildView(view) {
method removeChildView (line 711) | removeChildView(view, options) {
method _removeChildViews (line 727) | _removeChildViews(views) {
method _removeChildView (line 731) | _removeChildView(view, {shouldDetach} = {}) {
method _destroyChildView (line 743) | _destroyChildView(view) {
method _removeChildren (line 753) | _removeChildren() {
method _destroyChildren (line 761) | _destroyChildren() {
FILE: src/common/bind-events.js
function normalizeBindings (line 20) | function normalizeBindings(context, bindings) {
function bindEvents (line 31) | function bindEvents(entity, bindings) {
function unbindEvents (line 39) | function unbindEvents(entity, bindings) {
FILE: src/common/bind-requests.js
function normalizeBindings (line 18) | function normalizeBindings(context, bindings) {
function bindRequests (line 29) | function bindRequests(channel, bindings) {
function unbindRequests (line 37) | function unbindRequests(channel, bindings) {
FILE: src/common/build-region.js
function buildRegionFromObject (line 29) | function buildRegionFromObject(defaults, definition) {
FILE: src/common/monitor-view-events.js
function triggerMethodChildren (line 7) | function triggerMethodChildren(view, event, shouldTrigger) {
function shouldTriggerAttach (line 15) | function shouldTriggerAttach(view) {
function shouldAttach (line 19) | function shouldAttach(view) {
function shouldTriggerDetach (line 25) | function shouldTriggerDetach(view) {
function shouldDetach (line 29) | function shouldDetach(view) {
function triggerDOMRefresh (line 34) | function triggerDOMRefresh(view) {
function triggerDOMRemove (line 40) | function triggerDOMRemove(view) {
function handleBeforeAttach (line 46) | function handleBeforeAttach() {
function handleAttach (line 50) | function handleAttach() {
function handleBeforeDetach (line 55) | function handleBeforeDetach() {
function handleDetach (line 60) | function handleDetach() {
function handleBeforeRender (line 64) | function handleBeforeRender() {
function handleRender (line 68) | function handleRender() {
function monitorViewEvents (line 74) | function monitorViewEvents(view) {
FILE: src/common/trigger-method.js
function getEventName (line 15) | function getEventName(match, prefix, eventName) {
function triggerMethod (line 34) | function triggerMethod(event) {
FILE: src/common/view.js
function renderView (line 1) | function renderView(view) {
function destroyView (line 18) | function destroyView(view, disableDetachEvents) {
FILE: src/config/dom.js
function getEl (line 7) | function getEl(el) {
function setDomApi (line 12) | function setDomApi(mixin) {
method createBuffer (line 20) | createBuffer() {
method getDocumentEl (line 25) | getDocumentEl(el) {
method getEl (line 32) | getEl(selector) {
method findEl (line 38) | findEl(el, selector) {
method hasEl (line 43) | hasEl(el, childEl) {
method detachEl (line 48) | detachEl(el, _$el = getEl(el)) {
method replaceEl (line 53) | replaceEl(newEl, oldEl) {
method swapEl (line 68) | swapEl(el1, el2) {
method setContents (line 88) | setContents(el, html, _$el = getEl(el)) {
method appendContents (line 94) | appendContents(el, contents, {_$el = getEl(el), _$contents = getEl(conte...
method hasContents (line 99) | hasContents(el) {
method detachContents (line 105) | detachContents(el, _$el = getEl(el)) {
FILE: src/config/features.js
constant FEATURES (line 3) | const FEATURES = {
function isEnabled (line 10) | function isEnabled(name) {
function setEnabled (line 14) | function setEnabled(name, state) {
FILE: src/config/renderer.js
function setRenderer (line 2) | function setRenderer(renderer) {
FILE: src/mixins/behaviors.js
function getBehaviorClass (line 14) | function getBehaviorClass(options) {
function parseBehaviors (line 33) | function parseBehaviors(view, behaviors, allBehaviors) {
method _initBehaviors (line 44) | _initBehaviors() {
method _getBehaviorTriggers (line 48) | _getBehaviorTriggers() {
method _getBehaviorEvents (line 55) | _getBehaviorEvents() {
method _proxyBehaviorViewProperties (line 63) | _proxyBehaviorViewProperties() {
method _delegateBehaviorEntityEvents (line 68) | _delegateBehaviorEntityEvents() {
method _undelegateBehaviorEntityEvents (line 73) | _undelegateBehaviorEntityEvents() {
method _destroyBehaviors (line 77) | _destroyBehaviors(options) {
method _removeBehavior (line 86) | _removeBehavior(behavior) {
method _bindBehaviorUIElements (line 96) | _bindBehaviorUIElements() {
method _unbindBehaviorUIElements (line 100) | _unbindBehaviorUIElements() {
method _triggerEventOnBehaviors (line 104) | _triggerEventOnBehaviors(eventName, view, options) {
FILE: src/mixins/common.js
method _setOptions (line 23) | _setOptions(options, classOptions) {
FILE: src/mixins/delegate-entity-events.js
method _delegateEntityEvents (line 9) | _delegateEntityEvents(model, collection) {
method _undelegateEntityEvents (line 22) | _undelegateEntityEvents(model, collection) {
method _deleteEntityEventHandlers (line 35) | _deleteEntityEventHandlers() {
FILE: src/mixins/destroy.js
method isDestroyed (line 4) | isDestroyed() {
method destroy (line 8) | destroy(options) {
FILE: src/mixins/radio.js
method _initRadio (line 12) | _initRadio() {
method _destroyRadio (line 38) | _destroyRadio() {
method getChannel (line 42) | getChannel() {
FILE: src/mixins/regions.js
method _initRegions (line 15) | _initRegions() {
method _reInitRegions (line 26) | _reInitRegions() {
method addRegion (line 31) | addRegion(name, definition) {
method addRegions (line 38) | addRegions(regions) {
method _addRegions (line 55) | _addRegions(regionDefinitions) {
method _addRegion (line 68) | _addRegion(region, name) {
method removeRegion (line 80) | removeRegion(name) {
method removeRegions (line 89) | removeRegions() {
method _removeRegion (line 97) | _removeRegion(region, name) {
method _removeReferences (line 106) | _removeReferences(name) {
method emptyRegions (line 113) | emptyRegions() {
method hasRegion (line 122) | hasRegion(name) {
method getRegion (line 129) | getRegion(name) {
method _getRegions (line 136) | _getRegions() {
method getRegions (line 141) | getRegions() {
method showChildView (line 148) | showChildView(name, view, options) {
method detachChildView (line 154) | detachChildView(name) {
method getChildView (line 158) | getChildView(name) {
FILE: src/mixins/template-render.js
method _renderTemplate (line 11) | _renderTemplate(template) {
method getTemplate (line 26) | getTemplate() {
method mixinTemplateContext (line 35) | mixinTemplateContext(serializedData) {
method serializeData (line 44) | serializeData() {
method serializeModel (line 62) | serializeModel() {
method serializeCollection (line 67) | serializeCollection() {
method _renderHtml (line 72) | _renderHtml(template, data) {
method attachElContent (line 87) | attachElContent(html) {
FILE: src/mixins/triggers.js
function buildViewTrigger (line 7) | function buildViewTrigger(view, triggerDef) {
method _getViewTriggers (line 43) | _getViewTriggers(view, triggers) {
FILE: src/mixins/ui.js
method normalizeUIKeys (line 45) | normalizeUIKeys(hash) {
method normalizeUIString (line 52) | normalizeUIString(uiString) {
method normalizeUIValues (line 59) | normalizeUIValues(hash, property) {
method _getUIBindings (line 64) | _getUIBindings() {
method _bindUIElements (line 71) | _bindUIElements() {
method _unbindUIElements (line 94) | _unbindUIElements() {
method _getUI (line 108) | _getUI(name) {
FILE: src/mixins/view.js
method _isElAttached (line 29) | _isElAttached() {
method isDestroyed (line 38) | isDestroyed() {
method isRendered (line 44) | isRendered() {
method isAttached (line 50) | isAttached() {
method delegateEvents (line 56) | delegateEvents(events) {
method _getEvents (line 73) | _getEvents(events) {
method _getTriggers (line 85) | _getTriggers() {
method delegateEntityEvents (line 97) | delegateEntityEvents() {
method undelegateEntityEvents (line 107) | undelegateEntityEvents() {
method destroy (line 117) | destroy(options) {
method _removeElement (line 158) | _removeElement() {
method bindUIElements (line 164) | bindUIElements() {
method unbindUIElements (line 172) | unbindUIElements() {
method getUI (line 179) | getUI(name) {
method _buildEventProxies (line 184) | _buildEventProxies() {
method _getEventPrefix (line 190) | _getEventPrefix() {
method _proxyChildViewEvents (line 197) | _proxyChildViewEvents(view) {
method _childViewEventHandler (line 203) | _childViewEventHandler(eventName, ...args) {
FILE: src/object.js
method initialize (line 33) | initialize() {}
FILE: src/region.js
method initialize (line 53) | initialize() {}
method show (line 57) | show(view, options) {
method _getEl (line 98) | _getEl(el) {
method _setEl (line 110) | _setEl() {
method _setElement (line 124) | _setElement(el) {
method _setupChildView (line 148) | _setupChildView(view) {
method _proxyChildViewEvents (line 159) | _proxyChildViewEvents(view) {
method _shouldDisableMonitoring (line 168) | _shouldDisableMonitoring() {
method _isElAttached (line 172) | _isElAttached() {
method _attachView (line 176) | _attachView(view, { replaceElement } = {}) {
method _ensureElement (line 199) | _ensureElement(options = {}) {
method _getView (line 220) | _getView(view) {
method _getViewOptions (line 248) | _getViewOptions(viewOptions) {
method getEl (line 264) | getEl(el) {
method _replaceEl (line 274) | _replaceEl(view) {
method _restoreEl (line 286) | _restoreEl() {
method isReplaced (line 304) | isReplaced() {
method isSwappingView (line 309) | isSwappingView() {
method attachHtml (line 315) | attachHtml(view) {
method empty (line 321) | empty(options = { allowMissingEl: true }) {
method _empty (line 336) | _empty(view, shouldDestroy) {
method _stopChildViewEvents (line 357) | _stopChildViewEvents(view) {
method destroyView (line 366) | destroyView(view) {
method removeView (line 377) | removeView(view) {
method detachView (line 383) | detachView() {
method _detachView (line 395) | _detachView(view) {
method detachHtml (line 415) | detachHtml() {
method hasView (line 421) | hasView() {
method reset (line 428) | reset(options) {
method isDestroyed (line 439) | isDestroyed() {
method destroy (line 445) | destroy(options) {
FILE: src/utils/error.js
method constructor (line 15) | constructor(options) {
method captureStackTrace (line 26) | captureStackTrace() {
method toString (line 30) | toString() {
FILE: src/view.js
function childReducer (line 29) | function childReducer(children, region) {
method constructor (line 41) | constructor(options) {
method setElement (line 59) | setElement() {
method render (line 74) | render() {
method _removeChildren (line 97) | _removeChildren() {
method _getImmediateChildren (line 101) | _getImmediateChildren() {
FILE: test/rollup.config.js
function runSauce (line 16) | function runSauce() {
method ready (line 86) | ready(err, bs) {
FILE: test/setup/setup.js
function setFixtures (line 35) | function setFixtures() {
function clearFixtures (line 41) | function clearFixtures() {
FILE: test/unit/behavior.spec.js
method 'click .test' (line 859) | 'click .test'() {}
method events (line 865) | events() {
FILE: test/unit/collection-view/collection-view-data.spec.js
method buildChildView (line 312) | buildChildView(child, ChildViewClass) {
FILE: test/unit/collection-view/collection-view-empty.spec.js
method initialize (line 61) | initialize() {
FILE: test/unit/collection-view/collection-view-filtering.spec.js
function renderModels (line 9) | function renderModels(models) {
function isOdd (line 13) | function isOdd(num) {
method getFilter (line 187) | getFilter() {
FILE: test/unit/collection-view/collection-view-sorting.spec.js
method getComparator (line 218) | getComparator() {
FILE: test/unit/common/merge-options.spec.js
method initialize (line 10) | initialize(options) {
FILE: test/unit/config/dom.js
constant MAX_ARRAY_INDEX (line 6) | const MAX_ARRAY_INDEX = Math.pow(2, 53) - 1;
function isArrayLike (line 8) | function isArrayLike(collection) {
FILE: test/unit/mixins/common.spec.js
method options (line 15) | options() {
FILE: test/unit/mixins/radio.spec.js
method initialize (line 13) | initialize() {
FILE: test/unit/mixins/template-render.spec.js
method render (line 11) | render() {
FILE: test/unit/mixins/view.spec.js
method onRender (line 131) | onRender() {
FILE: test/unit/object.spec.js
method initialize (line 11) | initialize(opts) {
FILE: test/unit/on-attach.spec.js
method constructor (line 18) | constructor(options) {
method onAttach (line 26) | onAttach() {
method onBeforeAttach (line 29) | onBeforeAttach() {
method onDetach (line 32) | onDetach() {
method onBeforeDetach (line 35) | onBeforeDetach() {
method onDestroy (line 38) | onDestroy() {
FILE: test/unit/view.spec.js
method initialize (line 26) | initialize() {
Condensed preview — 141 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (1,045K chars).
[
{
"path": ".babelrc",
"chars": 98,
"preview": "{\n \"presets\": [\"@babel/env\"],\n \"env\": {\n \"test\": {\n \"plugins\": [\"istanbul\"]\n }\n }\n}\n"
},
{
"path": ".editorconfig",
"chars": 275,
"preview": "# EditorConfig is awesome: http://EditorConfig.org\n\nroot = true;\n\n[*]\n# Ensure there's no lingering whitespace\ntrim_tra"
},
{
"path": ".eslintrc",
"chars": 1658,
"preview": "{\n \"extends\": \"eslint:recommended\",\n \"parserOptions\": {\n \"ecmaVersion\": 6,\n \"sourceType\": \"module\"\n },\n \"env\":"
},
{
"path": ".gitignore",
"chars": 216,
"preview": ".DS_Store\n*.swp\n*.swo\n*.orig\n.idea\next/\n\n# Logs\nlogs\n*.log\n\n# Runtime data\npids\n*.pid\n*.seed\n\n# Dependency directory\nnod"
},
{
"path": ".npmignore",
"chars": 253,
"preview": "bower_components\ncoverage\ndocs\nsrc\ntest\ntmp\n.babelrc\n.editorconfig\n.eslintrc\n.gitignore\n.nyc_output\n.travis.yml\nbower.js"
},
{
"path": ".travis.yml",
"chars": 554,
"preview": "language: node_js\nnode_js:\n - \"10\"\ncache: yarn\nenv:\n - TEST_SUITE=coverage\n - TEST_SUITE=browser\n - TEST_SUITE=lodas"
},
{
"path": "CONTRIBUTING.md",
"chars": 5185,
"preview": "Marionette has a few guidelines to facilitate your contribution and streamline\nthe process of getting changes merged in "
},
{
"path": "ISSUE_TEMPLATE.md",
"chars": 954,
"preview": "### Description\n\n 1. The problem you are facing (in as much detail as is necessary to describe the problem to someone wh"
},
{
"path": "PULL_REQUEST_TEMPLATE.md",
"chars": 50,
"preview": "### Proposed changes\n -\n -\n -\n\nLink to the issue:\n"
},
{
"path": "bower.json",
"chars": 670,
"preview": "{\n \"name\": \"backbone.marionette\",\n \"description\": \"The Backbone Framework\",\n \"homepage\": \"https://marionettejs.com/\","
},
{
"path": "changelog.md",
"chars": 96948,
"preview": "### v4.1.3 [view commit logs](https://github.com/marionettejs/backbone.marionette/compare/v4.1.2...v4.1.3)\n\n#### Fixes\n*"
},
{
"path": "docs/backbone.radio.md",
"chars": 10974,
"preview": "# Backbone Radio\n\nThe Backbone Radio provides easy support for a number of messaging patterns for\nBackbone and Marionett"
},
{
"path": "docs/basics.md",
"chars": 6174,
"preview": "# Common Marionette Concepts\n\nThis document covers the basic usage patterns and concepts across Marionette.\nThis include"
},
{
"path": "docs/classes.md",
"chars": 3867,
"preview": "# Marionette Classes\n\nMarionette follows Backbone's [pseudo-class architecture](./basics.md#class-based-inheritance).\nTh"
},
{
"path": "docs/common.md",
"chars": 12115,
"preview": "# Common Marionette Functionality\n\nMarionette has a few methods that are common to [all classes](./classes.md).\n\n## Docu"
},
{
"path": "docs/dom.api.md",
"chars": 3966,
"preview": "# The DOM API\n\nWith the release of Marionette 3.2, developers can remove the dependency on\njQuery and integrate with the"
},
{
"path": "docs/dom.interactions.md",
"chars": 8494,
"preview": "# DOM Interactions\n\nIn addition to what Backbone provides the views, Marionette has additional API\nfor DOM interactions "
},
{
"path": "docs/dom.prerendered.md",
"chars": 3841,
"preview": "# Prerendered Content\n\n[View classes](./classes.md) can be initialized with pre-rendered DOM.\n\nThis can be HTML that's c"
},
{
"path": "docs/events.class.md",
"chars": 20228,
"preview": "# Class Events\n\nMarionette uses [`triggerMethod`](./events.md#triggermethod) internally to trigger various\nevents used w"
},
{
"path": "docs/events.entity.md",
"chars": 2914,
"preview": "# Entity events\n\nThe [`View`, `CollectionView` and `Behavior`](./classes.md) can bind to events that occur on attached m"
},
{
"path": "docs/events.md",
"chars": 15913,
"preview": "# Marionette Events\n\nThe Marionette Event system provides a system for objects to communicate with\neach other in a unifo"
},
{
"path": "docs/features.md",
"chars": 2383,
"preview": "# Features\n\nMarionette Features are opt-in functionality that you can enable by utilizing [`setEnabled`](#setting-a-feat"
},
{
"path": "docs/installation.md",
"chars": 2761,
"preview": "# Installing Marionette\n\nAs with all JavaScript libraries, there are a number of ways to get started with\na Marionette a"
},
{
"path": "docs/marionette.application.md",
"chars": 3957,
"preview": "# Marionette.Application\n\nThe `Application` provides hooks for organizing and initiating other elements\nand a view tree."
},
{
"path": "docs/marionette.behavior.md",
"chars": 10636,
"preview": "# Marionette.Behavior\n\nA `Behavior` provides a clean separation of concerns to your view logic,\nallowing you to share co"
},
{
"path": "docs/marionette.collectionview.md",
"chars": 33938,
"preview": "# Marionette.CollectionView\n\nA `CollectionView` like `View` manages a portion of the DOM via a single parent DOM element"
},
{
"path": "docs/marionette.mnobject.md",
"chars": 3771,
"preview": "# Marionette.MnObject\n\n`MnObject` incorporates backbone conventions `initialize`, `cid` and `extend`.\n`MnObject` include"
},
{
"path": "docs/marionette.region.md",
"chars": 17296,
"preview": "# Marionette.Region\n\nRegions provide consistent methods to manage, show and destroy\nviews in your applications and views"
},
{
"path": "docs/marionette.view.md",
"chars": 10698,
"preview": "# Marionette.View\n\nA `View` is used for managing portions of the DOM via a single parent DOM element or `el`.\nIt provide"
},
{
"path": "docs/readme.md",
"chars": 165,
"preview": "## Documentation\n\nAll of the documentation for Marionette can be found on the website at\n##### [marionettejs.com/docs/cu"
},
{
"path": "docs/routing.md",
"chars": 2094,
"preview": "# Routing in Marionette\n\nUsers of versions of Marionette prior to v4 will notice that a router is no longer a [bundled c"
},
{
"path": "docs/upgrade-v2-v3.md",
"chars": 9671,
"preview": "# Upgrade Guide from v2 to v3\n\nMarionette 3 introduces a number of breaking changes. This upgrade guide will go\nthrough "
},
{
"path": "docs/upgrade-v3-v4.md",
"chars": 12921,
"preview": "# Upgrade Guide from v3 to v4\n\nMarionette 4 introduces a number of breaking changes. This upgrade guide will go\nthrough "
},
{
"path": "docs/utils.md",
"chars": 3307,
"preview": "# Marionette Utility Functions\n\nMarionette provides a set of utility / helper functions that are used to\nfacilitate comm"
},
{
"path": "docs/view.lifecycle.md",
"chars": 10886,
"preview": "# View Lifecycle\n\nBoth [`View` and `CollectionView`](./classes.md) are aware of their lifecycle state\nwhich indicates if"
},
{
"path": "docs/view.rendering.md",
"chars": 14927,
"preview": "# View Template Rendering\n\nUnlike [`Backbone.View`](http://backbonejs.org/#View-template), [Marionette views](./classes."
},
{
"path": "lib/backbone.marionette.esm.js",
"chars": 85583,
"preview": "import Backbone from 'backbone';\nimport _ from 'underscore';\nimport Radio from 'backbone.radio';\n\nvar version = \"4.1.3\";"
},
{
"path": "lib/backbone.marionette.js",
"chars": 91951,
"preview": "/**\n* @license\n* MarionetteJS (Backbone.Marionette)\n* ----------------------------------\n* v4.1.3\n*\n* Copyright (c)2020 "
},
{
"path": "license.txt",
"chars": 89,
"preview": "MarionetteJS is distributed under [MIT license](http://mutedsolutions.mit-license.org/).\n"
},
{
"path": "package.json",
"chars": 2765,
"preview": "{\n \"name\": \"backbone.marionette\",\n \"description\": \"The Backbone Framework\",\n \"version\": \"4.1.3\",\n \"homepage\": \"https"
},
{
"path": "readme.md",
"chars": 6086,
"preview": "<h1 align=\"center\">Marionette.js</h1>\n<p align=\"center\">\n <img title=\"backbone marionette\" src='https://github.com/mari"
},
{
"path": "rollup.config.js",
"chars": 1690,
"preview": "import babel from 'rollup-plugin-babel';\nimport { eslint } from 'rollup-plugin-eslint';\nimport json from 'rollup-plugin-"
},
{
"path": "src/application.js",
"chars": 1548,
"preview": "// Application\n// -----------\n\nimport _ from 'underscore';\nimport extend from './utils/extend';\nimport buildRegion from "
},
{
"path": "src/backbone.marionette.js",
"chars": 2040,
"preview": "import {version as VERSION} from '../package.json';\n\nimport proxy from './utils/proxy';\nimport extend from './utils/exte"
},
{
"path": "src/behavior.js",
"chars": 3853,
"preview": "// Behavior\n// --------\n\n// A Behavior is an isolated set of DOM /\n// user interactions that can be mixed into any View."
},
{
"path": "src/child-view-container.js",
"chars": 4301,
"preview": "import _ from 'underscore';\n\n// Provide a container to store, retrieve and\n// shut down child views.\nconst Container = f"
},
{
"path": "src/collection-view.js",
"chars": 20406,
"preview": "// Collection View\n// ---------------\n\nimport _ from 'underscore';\nimport Backbone from 'backbone';\nimport MarionetteErr"
},
{
"path": "src/common/bind-events.js",
"chars": 1501,
"preview": "// Bind Entity Events & Unbind Entity Events\n// -----------------------------------------\n//\n// These methods are used t"
},
{
"path": "src/common/bind-requests.js",
"chars": 1331,
"preview": "// Bind/Unbind Radio Requests\n// -----------------------------------------\n//\n// These methods are used to bind/unbind a"
},
{
"path": "src/common/build-region.js",
"chars": 940,
"preview": "import _ from 'underscore';\nimport MarionetteError from '../utils/error';\nimport Region from '../region';\n\n// return the"
},
{
"path": "src/common/get-option.js",
"chars": 416,
"preview": "// Marionette.getOption\n// --------------------\n\n// Retrieve an object, function or other value from the\n// object or it"
},
{
"path": "src/common/merge-options.js",
"chars": 310,
"preview": "import _ from 'underscore';\n\n// Merge `keys` from `options` onto `this`\nconst mergeOptions = function(options, keys) {\n "
},
{
"path": "src/common/monitor-view-events.js",
"chars": 2104,
"preview": "// DOM Refresh\n// -----------\n\nimport _ from 'underscore';\n\n// Trigger method on children unless a pure Backbone.View\nfu"
},
{
"path": "src/common/normalize-methods.js",
"chars": 526,
"preview": "import _ from 'underscore';\n\n// Marionette.normalizeMethods\n// ----------------------\n\n// Pass in a mapping of events =>"
},
{
"path": "src/common/trigger-method.js",
"chars": 1341,
"preview": "// Trigger Method\n// --------------\n\nimport _ from 'underscore';\nimport getOption from './get-option';\n\n// split the eve"
},
{
"path": "src/common/view.js",
"chars": 1054,
"preview": "export function renderView(view) {\n if (view._isRendered) {\n return;\n }\n\n if (!view.supportsRenderLifecycle) {\n "
},
{
"path": "src/config/dom.js",
"chars": 2498,
"preview": "// DomApi\n// ---------\nimport _ from 'underscore';\nimport Backbone from 'backbone';\n\n// Performant method for returning"
},
{
"path": "src/config/features.js",
"chars": 366,
"preview": "// Add Feature flags here\n// e.g. 'class' => false\nconst FEATURES = {\n childViewEventPrefix: false,\n triggersStopPropa"
},
{
"path": "src/config/renderer.js",
"chars": 132,
"preview": "// Static setter for the renderer\nexport function setRenderer(renderer) {\n this.prototype._renderHtml = renderer;\n ret"
},
{
"path": "src/mixins/behaviors.js",
"chars": 3303,
"preview": "import _ from 'underscore';\nimport MarionetteError from '../utils/error';\nimport _invoke from '../utils/invoke';\n\n// Mix"
},
{
"path": "src/mixins/common.js",
"chars": 1265,
"preview": "import _ from 'underscore';\nimport Backbone from 'backbone';\n\nimport getOption from '../common/get-option';\nimport merge"
},
{
"path": "src/mixins/delegate-entity-events.js",
"chars": 1000,
"preview": "import _ from 'underscore';\n\n// MixinOptions\n// - collectionEvents\n// - modelEvents\n\nexport default {\n // Handle `model"
},
{
"path": "src/mixins/destroy.js",
"chars": 349,
"preview": "export default {\n _isDestroyed: false,\n\n isDestroyed() {\n return this._isDestroyed;\n },\n\n destroy(options) {\n "
},
{
"path": "src/mixins/events.js",
"chars": 90,
"preview": "import triggerMethod from '../common/trigger-method';\n\nexport default {\n triggerMethod\n}\n"
},
{
"path": "src/mixins/radio.js",
"chars": 986,
"preview": "import _ from 'underscore';\nimport Radio from 'backbone.radio';\nimport MarionetteError from '../utils/error';\n\n// MixinO"
},
{
"path": "src/mixins/regions.js",
"chars": 3732,
"preview": "import _ from 'underscore';\nimport _invoke from '../utils/invoke';\nimport buildRegion from '../common/build-region';\nimp"
},
{
"path": "src/mixins/template-render.js",
"chars": 2566,
"preview": "import _ from 'underscore';\n\n// MixinOptions\n// - template\n// - templateContext\n\nexport default {\n\n // Internal method "
},
{
"path": "src/mixins/triggers.js",
"chars": 1460,
"preview": "import _ from 'underscore';\nimport getNamespacedEventName from '../utils/get-namespaced-event-name';\nimport { isEnabled "
},
{
"path": "src/mixins/ui.js",
"chars": 3120,
"preview": "import _ from 'underscore';\n// allows for the use of the @ui. syntax within\n// a given key for triggers and events\n// sw"
},
{
"path": "src/mixins/view.js",
"chars": 5911,
"preview": "// ViewMixin\n// ---------\n\nimport Backbone from 'backbone';\nimport _ from 'underscore';\nimport BehaviorsMixin from './b"
},
{
"path": "src/object.js",
"chars": 835,
"preview": "// Object\n// ------\n\nimport _ from 'underscore';\nimport extend from './utils/extend';\nimport CommonMixin from './mixins/"
},
{
"path": "src/region.js",
"chars": 11283,
"preview": "// Region\n// ------\n\nimport _ from 'underscore';\nimport Backbone from 'backbone';\nimport MarionetteError from './utils/e"
},
{
"path": "src/utils/deprecate.js",
"chars": 913,
"preview": "/* global console */\n\nimport _ from 'underscore';\n\nimport {isEnabled} from '../config/features';\n\nconst deprecate = func"
},
{
"path": "src/utils/error.js",
"chars": 816,
"preview": "// Error\n// -----\n\nimport _ from 'underscore';\nimport extend from './extend';\nimport {version} from '../../package.json'"
},
{
"path": "src/utils/extend.js",
"chars": 205,
"preview": "// Marionette.extend\n// -----------------\n\nimport Backbone from 'backbone';\n\n// Borrow the Backbone `extend` method so w"
},
{
"path": "src/utils/get-namespaced-event-name.js",
"chars": 451,
"preview": "// Borrow event splitter from Backbone\nconst delegateEventSplitter = /^(\\S+)\\s*(.*)$/;\n\n// Set event name to be namespac"
},
{
"path": "src/utils/invoke.js",
"chars": 195,
"preview": "// Implementation of the invoke method (http://underscorejs.org/#invoke) with support for\n// lodash v3, v4, and undersco"
},
{
"path": "src/utils/proxy.js",
"chars": 201,
"preview": "//Internal utility for creating context style global utils\nconst proxy = function(method) {\n return function(context, ."
},
{
"path": "src/view.js",
"chars": 2510,
"preview": "// View\n// ---------\n\nimport _ from 'underscore';\nimport Backbone from 'backbone';\nimport monitorViewEvents from './comm"
},
{
"path": "test/.eslintrc",
"chars": 197,
"preview": "{\n \"extends\": [\"../.eslintrc\", \"./.globals.json\"],\n \"env\": {\n \"mocha\": true\n },\n \"rules\": {\n \"object-shorthand"
},
{
"path": "test/.globals.json",
"chars": 192,
"preview": "{\n \"globals\": {\n \"chai\": true,\n \"sinon\": true,\n \"spy\": true,\n \"expect\": true,\n \"$\": true,\n \"jQuery\": "
},
{
"path": "test/.mocharc.json",
"chars": 174,
"preview": "{\n \"checkLeaks\": true,\n \"file\": \"./test/setup/node.js\",\n \"recursive\": true,\n \"reporter\": \"dot\",\n \"require\": \"@babel"
},
{
"path": "test/browsersync.html",
"chars": 568,
"preview": "<!doctype html>\n<html lang='en'>\n<head>\n <meta charset='utf-8'>\n <title>Tests</title>\n <link rel='stylesheet' href='m"
},
{
"path": "test/rollup.config.js",
"chars": 2411,
"preview": "import easySauce from 'easy-sauce';\n\nimport babel from 'rollup-plugin-babel';\nimport browsersync from 'rollup-plugin-bro"
},
{
"path": "test/runner.html",
"chars": 668,
"preview": "<!doctype html>\n<html lang='en'>\n<head>\n <meta charset='utf-8'>\n <title>Tests</title>\n <link rel='stylesheet' href='."
},
{
"path": "test/setup/browser.js",
"chars": 698,
"preview": "const mochaGlobals = require('../.globals.json').globals;\n\nglobal.mocha.setup('bdd');\nglobal.onload = function() {\n glo"
},
{
"path": "test/setup/node.js",
"chars": 643,
"preview": "var chai = require('chai');\nvar sinon = require('sinon');\nvar sinonChai = require('sinon-chai');\nvar chaiJq = require('c"
},
{
"path": "test/setup/setup.js",
"chars": 1525,
"preview": "module.exports = function() {\n\n if (process.env.USE_LODASH) {\n const pathScore = require.resolve('underscore');\n "
},
{
"path": "test/unit/README.md",
"chars": 2699,
"preview": "### Unit Tests\n\n\n### Running unit tests\n\n1. Running just unit tests - `yarn test`\n\n2. Running coverage reporter - `yarn "
},
{
"path": "test/unit/application.spec.js",
"chars": 5324,
"preview": "'use strict';\n\nimport _ from 'underscore';\nimport Application from '../../src/application';\nimport View from '../../src/"
},
{
"path": "test/unit/backbone.marionette.spec.js",
"chars": 5325,
"preview": "import _ from 'underscore';\n\nimport * as Mn from '../../src/backbone.marionette';\nimport Marionette from '../../src/back"
},
{
"path": "test/unit/behavior.spec.js",
"chars": 25547,
"preview": "import _ from 'underscore';\nimport Behavior from '../../src/behavior';\nimport Region from '../../src/region';\nimport Vie"
},
{
"path": "test/unit/child-view-container.spec.js",
"chars": 14057,
"preview": "import _ from 'underscore';\nimport Backbone from 'backbone';\nimport ChildViewContainer from '../../src/child-view-contai"
},
{
"path": "test/unit/collection-view/collection-view-children.spec.js",
"chars": 31459,
"preview": "// Tests for the children container integration\n\nimport $ from 'jquery';\nimport _ from 'underscore';\nimport Backbone fro"
},
{
"path": "test/unit/collection-view/collection-view-childviewcontainer.sepc.js",
"chars": 2283,
"preview": "import _ from 'underscore';\nimport Backbone from 'backbone';\nimport CollectionView from '../../../src/collection-view';\n"
},
{
"path": "test/unit/collection-view/collection-view-data.spec.js",
"chars": 10126,
"preview": "// Anything related to Bb.collection events\n\nimport $ from 'jquery';\nimport _ from 'underscore';\nimport Backbone from 'b"
},
{
"path": "test/unit/collection-view/collection-view-empty.spec.js",
"chars": 13290,
"preview": "// Anything related to emptyView\n\nimport _ from 'underscore';\nimport Backbone from 'backbone';\nimport CollectionView fro"
},
{
"path": "test/unit/collection-view/collection-view-filtering.spec.js",
"chars": 14436,
"preview": "// Anything viewFilter related\n\nimport _ from 'underscore';\nimport Backbone from 'backbone';\nimport CollectionView from "
},
{
"path": "test/unit/collection-view/collection-view-sorting.spec.js",
"chars": 11364,
"preview": "// Anything viewComparator related\n\nimport _ from 'underscore';\nimport Backbone from 'backbone';\nimport CollectionView f"
},
{
"path": "test/unit/collection-view/collection-view-viewmixin.spec.js",
"chars": 5020,
"preview": "// Anything testing the integration of the ViewMixin, but not the ViewMixin itself.\n\nimport _ from 'underscore';\nimport "
},
{
"path": "test/unit/collection-view/collection-view.spec.js",
"chars": 11324,
"preview": "// Life-cycle and base functions\n\nimport $ from 'jquery';\nimport _ from 'underscore';\nimport Backbone from 'backbone';\ni"
},
{
"path": "test/unit/common/bind-events.spec.js",
"chars": 4751,
"preview": "import { bindEvents, unbindEvents } from '../../../src/common/bind-events';\n\ndescribe('bind-events', function() {\n let "
},
{
"path": "test/unit/common/bind-request.spec.js",
"chars": 4856,
"preview": "import { bindRequests, unbindRequests } from '../../../src/common/bind-requests';\n\ndescribe('bind-requests', function() "
},
{
"path": "test/unit/common/build-region.spec.js",
"chars": 10416,
"preview": "import View from '../../../src/view';\nimport Region from '../../../src/region';\n\ndescribe('Region', function() {\n descr"
},
{
"path": "test/unit/common/get-option.spec.js",
"chars": 1874,
"preview": "import getOption from '../../../src/common/get-option';\n\ndescribe('get option', function() {\n describe('when calling wi"
},
{
"path": "test/unit/common/merge-options.spec.js",
"chars": 1502,
"preview": "import mergeOptions from '../../../src/common/merge-options';\n\ndescribe('mergeOptions', function() {\n let target;\n\n be"
},
{
"path": "test/unit/common/monitor-view-events.js",
"chars": 915,
"preview": "import View from '../../../src/view';\nimport monitorViewEvents from '../../../src/common/monitor-view-events';\n\ndescribe"
},
{
"path": "test/unit/common/normalize-methods.spec.js",
"chars": 993,
"preview": "import View from '../../../src/view';\n\ndescribe('normalizeMethods', function() {\n 'use strict';\n\n let view;\n\n beforeE"
},
{
"path": "test/unit/common/trigger-method.spec.js",
"chars": 2308,
"preview": "import triggerMethod from '../../../src/common/trigger-method';\n\ndescribe('triggerMethod', function() {\n let target;\n\n "
},
{
"path": "test/unit/common/view.spec.js",
"chars": 5969,
"preview": "import Backbone from 'backbone';\n\nimport { renderView, destroyView } from '../../../src/common/view';\n\ndescribe('common "
},
{
"path": "test/unit/config/dom.js",
"chars": 8946,
"preview": "import $ from 'jquery';\nimport _ from 'underscore';\nimport DomApi, { setDomApi } from '../../../src/config/dom';\n\n// Cop"
},
{
"path": "test/unit/config/features.spec.js",
"chars": 472,
"preview": "import { setEnabled, isEnabled } from '../../../src/config/features';\n\ndescribe('features', function() {\n it('enabled w"
},
{
"path": "test/unit/config/renderer.spec.js",
"chars": 536,
"preview": "import { setRenderer } from '../../../src/config/renderer';\n\ndescribe('#setRenderer', function() {\n let MyObject;\n\n be"
},
{
"path": "test/unit/destroying-views.spec.js",
"chars": 1322,
"preview": "import View from '../../src/view';\n\n\ndescribe('destroying views', function() {\n 'use strict';\n\n describe('when destroy"
},
{
"path": "test/unit/get-immediate-children.spec.js",
"chars": 2381,
"preview": "import View from '../../src/view';\n\ndescribe('_getImmediateChildren', function() {\n let BaseView;\n\n beforeEach(functio"
},
{
"path": "test/unit/mixins/behaviors.spec.js",
"chars": 14367,
"preview": "'use strict';\n\nimport _ from 'underscore';\nimport Backbone from 'backbone';\nimport BehaviorsMixin from '../../../src/mix"
},
{
"path": "test/unit/mixins/common.spec.js",
"chars": 1128,
"preview": "import _ from 'underscore';\nimport CommonMixin from '../../../src/mixins/common';\n\ndescribe('Common Mixin', function() {"
},
{
"path": "test/unit/mixins/delegate-entity-events.spec.js",
"chars": 5113,
"preview": "import _ from 'underscore';\nimport Backbone from 'backbone';\nimport DelegateEntityEventsMixin from '../../../src/mixins/"
},
{
"path": "test/unit/mixins/destroy.spec.js",
"chars": 1585,
"preview": "import _ from 'underscore';\nimport DestroyMixin from '../../../src/mixins/destroy';\n\ndescribe('Destroy Mixin', function("
},
{
"path": "test/unit/mixins/radio.spec.js",
"chars": 3898,
"preview": "import _ from 'underscore';\nimport Backbone from 'backbone';\nimport Radio from 'backbone.radio';\nimport RadioMixin from "
},
{
"path": "test/unit/mixins/template-render.spec.js",
"chars": 7567,
"preview": "import _ from 'underscore';\nimport Backbone from 'backbone';\n\nimport TemplateRenderMixin from '../../../src/mixins/templ"
},
{
"path": "test/unit/mixins/ui.spec.js",
"chars": 2044,
"preview": "import View from '../../../src/view';\n\ndescribe('normalizeUIKeys', function() {\n 'use strict';\n\n describe('When creati"
},
{
"path": "test/unit/mixins/view.spec.js",
"chars": 15712,
"preview": "import { setEnabled } from '../../../src/backbone.marionette';\nimport CollectionView from '../../../src/collection-view'"
},
{
"path": "test/unit/object.spec.js",
"chars": 1878,
"preview": "import MnObject from '../../src/object';\n\ndescribe('marionette object', function() {\n\n describe('when creating an objec"
},
{
"path": "test/unit/on-attach.spec.js",
"chars": 13186,
"preview": "import _ from 'underscore';\nimport View from '../../src/view';\nimport Region from '../../src/region';\n\ndescribe('onAttac"
},
{
"path": "test/unit/on-dom-refresh.spec.js",
"chars": 2057,
"preview": "import _ from 'underscore';\nimport Backbone from 'backbone';\nimport Events from '../../src/mixins/events';\nimport View f"
},
{
"path": "test/unit/on-dom-remove.spec.js",
"chars": 2619,
"preview": "import _ from 'underscore';\nimport Backbone from 'backbone';\nimport Events from '../../src/mixins/events';\nimport View f"
},
{
"path": "test/unit/region.spec.js",
"chars": 38686,
"preview": "import _ from 'underscore';\nimport Backbone from 'backbone';\nimport Events from '../../src/mixins/events';\nimport Region"
},
{
"path": "test/unit/utils/deprecate.spec.js",
"chars": 3826,
"preview": "import deprecate from '../../../src/utils/deprecate';\n\nimport {setEnabled} from '../../../src/config/features';\n\ndescrib"
},
{
"path": "test/unit/utils/error.spec.js",
"chars": 2888,
"preview": "import { VERSION } from '../../../src/backbone.marionette';\nimport MarionetteError from '../../../src/utils/error';\n\ndes"
},
{
"path": "test/unit/utils/get-namespaced-event-name.spec.js",
"chars": 293,
"preview": "import getNamespacedEventName from '../../../src/utils/get-namespaced-event-name';\n\ndescribe('getNamespacedEventName', f"
},
{
"path": "test/unit/utils/proxy.spec.js",
"chars": 592,
"preview": "import proxy from '../../../src/utils/proxy';\n\ndescribe('proxy', function() {\n let method;\n\n beforeEach(function() {\n "
},
{
"path": "test/unit/view.child-views.spec.js",
"chars": 22804,
"preview": "describe('layoutView', function() {\n 'use strict';\n\n beforeEach(function() {\n this.layoutViewManagerTemplateFn = _."
},
{
"path": "test/unit/view.dynamic-regions.spec.js",
"chars": 9991,
"preview": "describe('itemView - dynamic regions', function() {\n 'use strict';\n\n let BBView;\n\n beforeEach(function() {\n BBView"
},
{
"path": "test/unit/view.renderer.js",
"chars": 2334,
"preview": "import _ from 'underscore';\nimport Backbone from 'backbone';\nimport View from '../../src/view';\n\ndescribe('View.setRende"
},
{
"path": "test/unit/view.spec.js",
"chars": 9414,
"preview": "import Backbone from 'backbone';\nimport Region from '../../src/region';\nimport View from '../../src/view';\n\ndescribe('it"
},
{
"path": "test/unit/view.triggers.spec.js",
"chars": 7360,
"preview": "import Backbone from 'backbone';\nimport { setEnabled } from '../../src/config/features';\nimport View from '../../src/vie"
},
{
"path": "test/unit/view.ui-bindings.spec.js",
"chars": 4542,
"preview": "describe('view ui elements', function() {\n 'use strict';\n\n beforeEach(function() {\n this.templateFn = _.template('<"
},
{
"path": "test/unit/view.ui-event-and-triggers.spec.js",
"chars": 3623,
"preview": "describe('view ui event trigger configuration', function() {\n 'use strict';\n\n describe('@ui syntax within events and t"
},
{
"path": "trigger-deploy-mn-com.js",
"chars": 991,
"preview": "var Travis = require('travis-ci');\nvar repo = 'marionettejs/marionettejs.com';\nvar travis = new Travis({\n version: '2.0"
},
{
"path": "upgradeGuide.md",
"chars": 8659,
"preview": "## Newer versions\n\nUpgrade information for newer versions are available in the changelog or upgrade guides\nfound on [mar"
}
]
About this extraction
This page contains the full source code of the marionettejs/backbone.marionette GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 141 files (979.0 KB), approximately 240.1k tokens, and a symbol index with 347 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.