Volodymyr's public fiddles
-
Marionette.js. Backbone.Radio.channel() trigger(), .on(), .off(), Mn.Object.listenTo(), Mn.Object.stopListening()
Channel can `trigger()` events. It also is capable of handling those events with `.on()`, and stop handling them with `.off()`. But separate objects can be allocated for handling channel events. They bind to channel events with `Mn.Object.listenTo()`, and unbind with `Mn.Object.stopListening()`.
-
Marionette.js. Behavior. `.view`, `.$`, `.el`, and `$el` inside a Behavior
The Behavior has a number of proxies attributes that directly refer to the related attribute on a view: $, el, $el. In addition, each behavior is able to reference the view they are attached to through the view attribute
-
Marionette.js. Behavior. Referencing the DOM - conflicts between `ui` hashes on the Behavior and the View
Behaviors, like views, have a ui attribute that can reference and cache DOM elements, just as in the View. In case of conflicts, the `ui` definition of the view will silently take precedence.
-
Marionette.js. Behavior. Using `ui`, `events` and `modelEvents` in Behavior
As in views, events and triggers can use the ui references in their listeners. These can be defined on either the Behavior or the View
-
Marionette.js. Defining and Attaching Behaviors - chain of events during View `initialize()` and `render()`
Order of events during instantiation: Behavior initialize (has access to this.view property) then View.initialize. During rendering the View is rendered first, and then behavior's `onRender()` method is called.
-
Marionette.js. Nesting Behaviors and dynamicaly setting `ui` and `behaviors` hash properties
In addition to extending a View with Behavior, a Behavior can itself use other Behaviors. The syntax is identical to that used for a View
-
Marionette.js. Defining and Attaching Behaviors
options: {} - set default values; this.getOption() - get an option defined by an instance or default for the class; this.view - reference to the view containing behavior; behaviors: [{behaviorClass: "SomeClass", option_1: ...}]
-
Marionette.js. View with jQuery.Tooltips.js plugin use
The easiest way to see how to use the Behavior class is to take an example view and factor out common behavior to be shared across other views.
-
Marionette.js. Application. `start()` method and `onBeforeStart` and `onStart` handlers
The Application comes with a start method. This can be used to accomplish tasks before the rest of your application begins.
-
Marionette.js. Region. CSS Animation
Shows how to configure a region to animate with CSS
-
Marionette.js. Region. jQuery Animation while swapping Views
Shows how to configure a Region to animate with jQuery
-
Marionette.js. Region ::isSwappingView() and ::empty() methods and View::getRegion() method. Region.prototype.attachHtml() animation
Shows how to configure a custom Region class
-
Marionette.js - Region class, Region.hasView() and Region.currentView
Custom `Region` class, `hasView()` method and `currentView` property
-
Marionette.js. Events. Triggering and Handling Events on Child Views - mini application
Marionette has a `triggers` hash and `childViewTriggers` hash that allow selected events to fire events directly, allowing them to be propagated up the view hierarchy more easily and explicitly. The values of the hash should be a string of the event to trigger on the parent.
-
Marionette.js. Events. View `triggerMethod` and magic event handlers
The `triggerMethod` method fires the named event on the view - any listeners will then be triggered on the event. If there are no listeners, this call will still succeed. All arguments after the first argument will be passed to all event handlers.
-
Marionette.js. CollectionView. "filter" and "sort" models in the CollectionView - mini Application
CollectionView allows for a custom filter option if you want to prevent some of the underlying collection's models from being rendered as child views. The filter function takes a model from the collection and returns a truthy value if the child should be rendered, and a falsey value if it should not.
-
Marionette.js. CollectionView. Build List Trees in Marionette 3
Combine `View` and `CollectionView` to build up the tree in a more explicit manner than in Marionette 2.
-
Marionette.js. CollectionView. Build Tables Using Marionette 3
Marionette 3 doesn't use `CompositeView` any more. We now build tables using `View`s and `regions`.
-
Marionette.js. CollectionView. Child Event Bubbling
When a child view triggers an event, that event will bubble up one level to the parent collection view. The parent Collection View may handle this event in "onChildview + event suffix " event handler.
-
Marionette.js. CollectionView's `destroy`
`CollectionView` implements a `destroy` method which automatically destroys its nested childViews and cleans up listeners.