#

API Docs for: 3.10.3
Show: Inherited Protected Private Deprecated

# App.Content Class

Uses

- PjaxContent

Defined in: `app/js/app-extensions/app-content.js:11`
Module: app-content
Parent Module: app

Available since 3.7.0

`Y.App` extension that provides pjax-style content fetching and handling.

This makes it easy to fetch server rendered content for URLs using Ajax. The HTML content returned from the server will be view-ified and set as the app's main content, making it seamless to use a mixture of server and client rendered views.

When the `"app-content"` module is used, it will automatically mix itself into `Y.App`, and it provides three main features:

- `Y.App.Content.route`: A stack of middleware which forms a pjax-style content route.

- `loadContent()`: Route middleware which load content from a server. This makes an Ajax request for the requested URL, parses the returned content and puts it on the route's response object.

- `showContent()`: Method which provides an easy way to view-ify HTML content which should be shown as an app's active/visible view.

The following is an example of how these features can be used:

    // Creates a new app and registers the "post" view.
    var app = new Y.App({
        views: {
            post: {type: Y.PostView}
        }
    });

    // Uses a simple server rendered content route for the About page.
    app.route('/about/', Y.App.Content.route);

    // Uses the loadContent() middleware to fetch the contents of the post
    // from the server and shows that content in a "post" view.
    app.route('/posts/:id/', 'loadContent', function (req, res, next) {
        this.showContent(res.content.node, {view: 'post'});
    });

- Index
- Methods
- Properties
- Attributes

## Item Index

### Methods

- _contentRoute
- _onPjaxIOComplete
- _onPjaxIOEnd
- getContent
- loadContent
- showContent

### Properties

- route static

### Attributes

- addPjaxParam
- contentSelector
- timeout
- titleSelector

## Methods

### `_contentRoute`

(

- `req`
- `res`
- `next`

)
protected

Defined in `app/js/app-extensions/app-content.js:180`

Available since 3.7.0

Provides a default content route which will show a server rendered view.

Note: This route callback assumes that it's called after the `loadContent()` middleware.

#### Parameters:

- `req` Object

  Request object.

- `res` Object

  Response Object.

- `next` Function

  Function to pass control to the next route callback.

### `_onPjaxIOComplete`

(

- `id`
- `ioResponse`
- `details`

)
protected

Inherited from PjaxContent: `pjax/js/pjax-content.js:159`

Available since 3.7.0

Handles IO complete events.

This parses the content from the `Y.io()` response and puts it on the route's response object.

#### Parameters:

- `id` String

  The `Y.io` transaction id.

- `ioResponse` Object

  The `Y.io` response object.

- `details` Object

  Extra details carried through from `loadContent()`.

### `_onPjaxIOEnd`

(

- `id`
- `details`

)
protected

Inherited from PjaxContent: `pjax/js/pjax-content.js:189`

Available since 3.5.0

Handles IO end events.

#### Parameters:

- `id` String

  The `Y.io` transaction id.

- `details` Object

  Extra details carried through from `loadContent()`.

### `getContent`

(

- `responseText`

)
Object

Inherited from PjaxContent: `pjax/js/pjax-content.js:38`

Available since 3.5.0

Extracts and returns the relevant HTML content from an Ajax response. The content is extracted using the `contentSelector` attribute as a CSS selector. If `contentSelector` is `null`, the entire response will be returned.

The return value is an object containing two properties:

- `node`: A `Y.Node` instance for a document fragment containing the extracted HTML content.

- `title`: The title of the HTML page, if any, extracted using the `titleSelector` attribute (which defaults to looking for a `<title>` element). If `titleSelector` is not set or if a title could not be found, this property will be `undefined`.

#### Parameters:

- `responseText` String

  Raw Ajax response text.

#### Returns:

Object: Content object with the properties described above.

### `loadContent`

(

- `req`
- `res`
- `next`

)

Inherited from PjaxContent: `pjax/js/pjax-content.js:83`

Available since 3.7.0

Pjax route middleware to load content from a server. This makes an Ajax request for the requested URL, parses the returned content and puts it on the route's response object.

This is route middleware and not intended to be the final callback for a route. This will add the following information to the route's request and response objects:

- `req.ioURL`: The full URL that was used to make the `Y.io()` XHR. This may contain `"pjax=1"` if the `addPjaxParam` option is set.

- `res.content`: An object containing `node` and `title` properties for the content extracted from the server's response. See `getContent()` for more details.

- `res.ioResponse`: The full `Y.io()` response object. This is useful if you need access to the XHR's response `status` or HTTP headers.

#### Parameters:

- `req` Object

  Request object.

- `res` Object

  Response Object.

- `next` Function

  Function to pass control to the next route callback.

#### Example:

    router.route('/foo/', 'loadContent', function (req, res, next) {
        Y.one('container').setHTML(res.content.node);
        Y.config.doc.title = res.content.title;
    });

### `showContent`

(

- `content`
- `[options]`
- `[callback]`

)

Defined in `app/js/app-extensions/app-content.js:75`

Available since 3.7.0

Sets this app's `activeView` attribute using the specified `content`.

This provides an easy way to view-ify HTML content which should be shown as this app's active/visible view. This method will determine the appropriate view `container` node based on the specified `content`. By default, a new `Y.View` instance will be created unless `options.view` is specified.

Under the hood, this method calls the `showView()` method, so refer to its docs for more information.

#### Parameters:

- `content` HTMLElement | Node | String

  The content to show, it may be provided as a selector string, a DOM element, or a `Y.Node` instance.

- `[options]` Object optional

  Optional objects containing any of the following properties in addition to any `showView()` options:

  - `[view]` Object | String optional

    The name of a view defined in this app's `views`, or an object with the following properties:

    - `name` String
      The name of a view defined in this app's `views`.
    - `[config]` Object optional
      Optional configuration to use when creating the new view instance. This config object can also be used to update an existing or preserved view's attributes when `options.update` is `true`. **Note:** If a `container` is specified, it will be overridden by the `content` specified in the first argument.
- `[callback]` Function optional

  Optional callback function to call after the new `activeView` is ready to use. Note: this will override `options.callback` and it can be specified as either the second or third argument. The function will be passed the following:

  - `view` View

    A reference to the new `activeView`.

## Properties

### `route`

Array static

Defined in `app/js/app-extensions/app-content.js:59`

Available since 3.7.0

A stack of middleware which forms a pjax-style content route.

This route will load the rendered HTML content from the server, then create and show a new view using those contents.

## Attributes

### `addPjaxParam`

Boolean

Inherited from PjaxContent: `pjax/js/pjax-content.js:204`

Available since 3.5.0

If `true`, a "pjax=1" query parameter will be appended to all URLs requested via Pjax.

Browsers ignore HTTP request headers when caching content, so if the same URL is used to request a partial Pjax page and a full page, the browser will cache them under the same key and may later load the cached partial page when the user actually requests a full page (or vice versa).

To prevent this, we can add a bogus query parameter to the URL so that Pjax URLs will always be cached separately from non-Pjax URLs.

Default: true

#### Fires event `addPjaxParamChange`

Fires when the value for the configuration attribute `addPjaxParam` is changed. You can listen for the event using the `on` method if you wish to be notified before the attribute's value has changed, or using the `after` method if you wish to be notified after the attribute's value has changed.

#### Parameters:

- `e` EventFacade
  An Event Facade object with the following attribute-specific properties added:
  - `prevVal` Any
    The value of the attribute, prior to it being set.
  - `newVal` Any
    The value the attribute is to be set to.
  - `attrName` String
    The name of the attribute being set.
  - `subAttrName` String
    If setting a property within the attribute's value, the name of the sub-attribute property being set.

### `contentSelector`

String

Inherited from PjaxContent: `pjax/js/pjax-content.js:226`

Available since 3.5.0

CSS selector used to extract a specific portion of the content of a page loaded via Pjax.

For example, if you wanted to load the page `example.html` but only use the content within an element with the id "pjax-content", you'd set `contentSelector` to "#pjax-content".

If not set, the entire page will be used.

Default: null

#### Fires event `contentSelectorChange`

Fires when the value for the configuration attribute `contentSelector` is changed. You can listen for the event using the `on` method if you wish to be notified before the attribute's value has changed, or using the `after` method if you wish to be notified after the attribute's value has changed.

#### Parameters:

- `e` EventFacade
  An Event Facade object with the following attribute-specific properties added:
  - `prevVal` Any
    The value of the attribute, prior to it being set.
  - `newVal` Any
    The value the attribute is to be set to.
  - `attrName` String
    The name of the attribute being set.
  - `subAttrName` String
    If setting a property within the attribute's value, the name of the sub-attribute property being set.

### `timeout`

Number

Inherited from PjaxContent: `pjax/js/pjax-content.js:263`

Available since 3.5.0

Time in milliseconds after which an Ajax request should time out.

Default: 30000

#### Fires event `timeoutChange`

Fires when the value for the configuration attribute `timeout` is changed. You can listen for the event using the `on` method if you wish to be notified before the attribute's value has changed, or using the `after` method if you wish to be notified after the attribute's value has changed.

#### Parameters:

- `e` EventFacade
  An Event Facade object with the following attribute-specific properties added:
  - `prevVal` Any
    The value of the attribute, prior to it being set.
  - `newVal` Any
    The value the attribute is to be set to.
  - `attrName` String
    The name of the attribute being set.
  - `subAttrName` String
    If setting a property within the attribute's value, the name of the sub-attribute property being set.

### `titleSelector`

String

Inherited from PjaxContent: `pjax/js/pjax-content.js:245`

Available since 3.5.0

CSS selector used to extract a page title from the content of a page loaded via Pjax.

By default this is set to extract the title from the `<title>` element, but you could customize it to extract the title from an `<h1>`, or from any other element, if that's more appropriate for the content you're loading.

Default: "title"

#### Fires event `titleSelectorChange`

Fires when the value for the configuration attribute `titleSelector` is changed. You can listen for the event using the `on` method if you wish to be notified before the attribute's value has changed, or using the `after` method if you wish to be notified after the attribute's value has changed.

#### Parameters:

- `e` EventFacade
  An Event Facade object with the following attribute-specific properties added:
  - `prevVal` Any
    The value of the attribute, prior to it being set.
  - `newVal` Any
    The value the attribute is to be set to.
  - `attrName` String
    The name of the attribute being set.
  - `subAttrName` String
    If setting a property within the attribute's value, the name of the sub-attribute property being set.