* @output wp-includes/js/wp-backbone.js
window.wp = window.wp || {};
* Create the WordPress Backbone namespace.
* A backbone subview manager.
* @since 3.6.0 Moved wp.media.Views to wp.Backbone.Subviews.
* @param {wp.Backbone.View} view The main view.
* @param {Array|Object} views The subviews for the main view.
wp.Backbone.Subviews = function( view, views ) {
this._views = _.isArray( views ) ? { '': views } : views || {};
wp.Backbone.Subviews.extend = Backbone.Model.extend;
_.extend( wp.Backbone.Subviews.prototype, {
* Fetches all of the subviews.
* @return {Array} All the subviews.
return _.flatten( _.values( this._views ) );
* Fetches all subviews that match a given `selector`.
* If no `selector` is provided, it will grab all subviews attached
* @param {string} selector A jQuery selector.
* @return {Array} All the subviews that match the selector.
get: function( selector ) {
selector = selector || '';
return this._views[ selector ];
* Fetches the first subview that matches a given `selector`.
* If no `selector` is provided, it will grab the first subview attached to the
* Useful when a selector only has one subview at a time.
* @param {string} selector A jQuery selector.
* @return {Backbone.View} The view.
first: function( selector ) {
var views = this.get( selector );
return views && views.length ? views[0] : null;
* Registers any number of `views` to a `selector`.
* When no `selector` is provided, the root selector (the empty string)
* is used. `views` accepts a `Backbone.View` instance or an array of
* `Backbone.View` instances.
* Accepts an `options` object, which has a significant effect on the
* `options.silent` - *boolean, `false`*
* If `options.silent` is true, no DOM modifications will be made.
* `options.add` - *boolean, `false`*
* Use `Views.add()` as a shortcut for setting `options.add` to true.
* By default, the provided `views` will replace any existing views
* associated with the selector. If `options.add` is true, the provided
* `views` will be added to the existing views.
* `options.at` - *integer, `undefined`*
* When adding, to insert `views` at a specific index, use `options.at`.
* By default, `views` are added to the end of the array.
* @param {string} selector A jQuery selector.
* @param {Array|Object} views The subviews for the main view.
* @param {Object} options Options for call. If `options.silent` is true,
* no DOM modifications will be made. Use
* `Views.add()` as a shortcut for setting
* `options.add` to true. If `options.add` is
* true, the provided `views` will be added to
* the existing views. When adding, to insert
* `views` at a specific index, use `options.at`.
* @return {wp.Backbone.Subviews} The current Subviews instance.
set: function( selector, views, options ) {
if ( ! _.isString( selector ) ) {
views = _.isArray( views ) ? views : [ views ];
existing = this.get( selector );
if ( _.isUndefined( options.at ) ) {
next = existing.concat( views );
next.splice.apply( next, [ options.at, 0 ].concat( views ) );
_.each( next, function( view ) {
_.each( existing, function( view ) {
_.each( next, function( view ) {
this._views[ selector ] = next;
_.each( views, function( subview ) {
var constructor = subview.Views || wp.Backbone.Subviews,
subviews = subview.views = subview.views || new constructor( subview );
subviews.parent = this.view;
subviews.selector = selector;
this._attach( selector, views, _.extend({ ready: this._isReady() }, options ) );
* Add subview(s) to existing subviews.
* An alias to `Views.set()`, which defaults `options.add` to true.
* Adds any number of `views` to a `selector`.
* When no `selector` is provided, the root selector (the empty string)
* is used. `views` accepts a `Backbone.View` instance or an array of
* `Backbone.View` instances.
* Uses `Views.set()` when setting `options.add` to `false`.
* Accepts an `options` object. By default, provided `views` will be
* inserted at the end of the array of existing views. To insert
* `views` at a specific index, use `options.at`. If `options.silent`
* is true, no DOM modifications will be made.
* For more information on the `options` object, see `Views.set()`.
* @param {string} selector A jQuery selector.
* @param {Array|Object} views The subviews for the main view.
* @param {Object} options Options for call. To insert `views` at a
* specific index, use `options.at`. If
* `options.silent` is true, no DOM modifications
* @return {wp.Backbone.Subviews} The current subviews instance.
add: function( selector, views, options ) {
if ( ! _.isString( selector ) ) {
return this.set( selector, views, _.extend({ add: true }, options ) );
* Removes an added subview.
* Stops tracking `views` registered to a `selector`. If no `views` are
* set, then all of the `selector`'s subviews will be unregistered and
* Accepts an `options` object. If `options.silent` is set, `remove`
* will *not* be triggered on the unregistered views.
* @param {string} selector A jQuery selector.
* @param {Array|Object} views The subviews for the main view.
* @param {Object} options Options for call. If `options.silent` is set,
* `remove` will *not* be triggered on the
* @return {wp.Backbone.Subviews} The current Subviews instance.
unset: function( selector, views, options ) {
if ( ! _.isString( selector ) ) {
if ( existing = this.get( selector ) ) {
views = _.isArray( views ) ? views : [ views ];
this._views[ selector ] = views.length ? _.difference( existing, views ) : [];
if ( ! options || ! options.silent )
_.invoke( views, 'remove' );
* Helps to preserve all subview events when re-rendering the master
* view. Used in conjunction with `Views.render()`.
* @return {wp.Backbone.Subviews} The current Subviews instance.
$( _.pluck( this.all(), 'el' ) ).detach();
* Used in conjunction with `Views.detach()`.
* @return {wp.Backbone.Subviews} The current Subviews instance.
_.each( this._views, function( views, selector ) {
this._attach( selector, views, options );
* Triggers the `remove()` method on all subviews. Detaches the master
* view from its parent. Resets the internals of the views manager.
* Accepts an `options` object. If `options.silent` is set, `unset`
* will *not* be triggered on the master view's parent.
* @param {Object} options Options for call.
* @param {boolean} options.silent If true, `unset` wil *not* be triggered on
* the master views' parent.
* @return {wp.Backbone.Subviews} The current Subviews instance.
remove: function( options ) {
if ( ! options || ! options.silent ) {
if ( this.parent && this.parent.views )
this.parent.views.unset( this.selector, this.view, { silent: true });
_.invoke( this.all(), 'remove' );
* Replaces a selector's subviews
* By default, sets the `$target` selector's html to the subview `els`.
* Can be overridden in subclasses.
* @param {string} $target Selector where to put the elements.
* @param {*} els HTML or elements to put into the selector's HTML.
* @return {wp.Backbone.Subviews} The current Subviews instance.
replace: function( $target, els ) {
* Insert subviews into a selector.
* By default, appends the subview `els` to the end of the `$target`
* selector. If `options.at` is set, inserts the subview `els` at the
* Can be overridden in subclasses.
* @param {string} $target Selector where to put the elements.
* @param {*} els HTML or elements to put at the end of the
* @param {?Object} options Options for call.
* @param {?number} options.at At which index to put the elements.
* @return {wp.Backbone.Subviews} The current Subviews instance.
insert: function( $target, els, options ) {
var at = options && options.at,
if ( _.isNumber( at ) && ($children = $target.children()).length > at )
$children.eq( at ).before( els );
* Triggers the ready event.
* Only use this method if you know what you're doing. For performance reasons,
* this method does not check if the view is actually attached to the DOM. It's
* taking your word for it.
* Fires the ready event on the current view and all attached subviews.
this.view.trigger('ready');
// Find all attached subviews, and call ready on them.
_.chain( this.all() ).map( function( view ) {
}).flatten().where({ attached: true }).invoke('ready');
* Attaches a series of views to a selector. Internal.
* Checks to see if a matching selector exists, renders the views,
* performs the proper DOM operation, and then checks if the view is
* attached to the document.
* @param {string} selector A jQuery selector.
* @param {Array|Object} views The subviews for the main view.
* @param {Object} options Options for call.
* @param {boolean} options.add If true the provided views will be added.
* @return {wp.Backbone.Subviews} The current Subviews instance.
_attach: function( selector, views, options ) {
var $selector = selector ? this.view.$( selector ) : this.view.$el,
// Check if we found a location to attach the views.
if ( ! $selector.length )
managers = _.chain( views ).pluck('views').flatten().value();
// Render the views if necessary.
_.each( managers, function( manager ) {
// Insert or replace the views.
this[ options.add ? 'insert' : 'replace' ]( $selector, _.pluck( views, 'el' ), options );
* Set attached and trigger ready if the current view is already
_.each( managers, function( manager ) {
* Determines whether or not the current view is in the DOM.
* @return {boolean} Whether or not the current view is in the DOM.
if ( node === document.body )
wp.Backbone.View = Backbone.View.extend({
// The constructor for the `Views` manager.
Subviews: wp.Backbone.Subviews,
* This extends the backbone view to have a build-in way to use subviews. This
* makes it easier to have nested views.
* @since 3.6.0 Moved wp.media.View to wp.Backbone.View
* @augments Backbone.View
* @param {Object} options The options for this view.
constructor: function( options ) {
this.views = new this.Subviews( this, this.views );
this.on( 'ready', this.ready, this );
It is recommended that you Edit text format, this type of Fix handles quite a lot in one request
