Class: SC.ContainerView


Extends SC.View.

A container view will display its "content" view as its only child. You can use a container view to easily swap out views on your page. In addition to displaying the actual view in the content property, you can also set the nowShowing property to the property path of a view in your page and the view will be found and swapped in for you.

Animated Transitions

To animate the transition between views, you can provide a transitionSwap plugin to SC.ContainerView. There are several common transitions pre-built and if you want to create your own, the SC.ViewTransitionProtocol defines the methods to implement.

The transitions included with SC.ContainerView are:

To use a transitionSwap plugin, simply set it as the value of the container view's transitionSwap property.

For example,

container = SC.ContainerView.create({
  transitionSwap: SC.ContainerView.PUSH
});

Since each transitionSwap plugin predefines a unique animation, SC.ContainerView provides the transitionSwapOptions property to allow for modifications to the animation.

For example,

container = SC.ContainerView.create({
  transitionSwap: SC.ContainerView.PUSH,
  transitionSwapOptions: {
    duration: 1.25,    // Use a longer duration then default
    direction: 'up'    // Push the old content up
  }
});

All the predefined transitionSwap plugins take options to modify the default duration and timing of the animation and to see what other options are available, refer to the documentation of the plugin.

Defined in: container.js

Since:
SproutCore 1.0

Field Summary

Field Detail

classNames Array
Default value:
['sc-container-view']
See:
SC.View#classNames
SC.Object#concatenatedProperties
contentView SC.View

The content view to display. This will become the only child view of the view. Note that if you set the nowShowing property to any value other than 'null', the container view will automatically change the contentView to reflect view indicated by the value.

Default value:
null
isTransitioning Boolean

Whether the container view is in the process of transitioning or not.

You should observe this property in order to delay any updates to the new content until the transition is complete.

Default value:
false
Since:
Version 1.10
nowShowing String|SC.View

Optional path name for the content view. Set this to a property path pointing to the view you want to display. This will automatically change the content view for you. If you pass a relative property path or a single property name, then the container view will look for it first on its page object then relative to itself. If you pass a full property name (e.g. "MyApp.anotherPage.anotherView"), then the path will be followed from the top-level.

Default value:
null
transitionSwap Object (SC.SwapTransitionProtocol)

The transitionSwap plugin to use when swapping views.

SC.ContainerView uses a pluggable transition architecture where the transition setup, animation and cleanup can be handled by a specified transitionSwap plugin.

There are a number of pre-built plugins available:

SC.ContainerView.DISSOLVE SC.ContainerView.FADE_COLOR SC.ContainerView.MOVE_IN SC.ContainerView.PUSH SC.ContainerView.REVEAL

You can even provide your own custom transitionSwap plugins. Just create an object that conforms to the SC.SwapTransitionProtocol protocol.

Default value:
null
Since:
Version 1.10
transitionSwapOptions Object

The options for the given transitionSwap plugin.

These options are specific to the current transitionSwap plugin used and are used to modify the transition animation. To determine what options may be used for a given transition and to see what the default options are, see the documentation for the transition plugin being used.

Most transitions will accept a duration and timing option, but may also use other options. For example, SC.ContainerView.PUSH accepts options like:

transitionSwapOptions: {
  direction: 'left',
  duration: 0.25,
  timing: 'linear'
}
Default value:
null
Since:
Version 1.10
Documentation generated by JsDoc Toolkit 2.4.0 on Wed Apr 08 2015 10:02:20 GMT-0600 (CST)