You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
* Added the ability to set the XHR `contentType` property globally via `options.contentType` and to override it per request using the HTML API `data-content-type` attribute
* Updated the `gruntify-eslint` dependency to `v5.0.0`
* `README` updates
Payload.js is a javascript single page application (SPA) driver that creates a global `Payload` object to automate API requests and render [Handlebars](http://handlebarsjs.com/) templates or raw HTML data within the DOM. Payload.js's behaviors are initialized by calling `Payload.deliver()`with a default object of options, and are further controlled by setting various HTML `data-` attributes on DOM objects.
8
+
Payload.js is a javascript single page application (SPA) driver that allows you to automate and manage REST API requests and render [Handlebars](http://handlebarsjs.com/) templates or raw HTML from the response data. It also allows you to render Handlebars templates with expressions populated by data in memory, and includes a **pub/sub**, or **publish/subscribe**, API for managing custom events.
9
9
10
-
When DOM objects imbued with Payload.js's selectors are activated, a call to `Payload.apiRequest()` is performed, which involves making a XHR request and/or rendering a template. Payload.js also contains template/response caching and an event system as additional means of integration.
10
+
When DOM objects imbued with Payload.js's selectors are activated, a call to `Payload.apiRequest()` is performed, which involves making an XHR request and/or rendering a template. Payload.js also contains **rendered template/response caching** and an **extensions API** as additional means of integration.
11
11
12
12
## Table of Contents
13
13
@@ -17,7 +17,7 @@ When DOM objects imbued with Payload.js's selectors are activated, a call to `Pa
@@ -29,7 +29,7 @@ When DOM objects imbued with Payload.js's selectors are activated, a call to `Pa
29
29
30
30
## Installation
31
31
32
-
Payload.js can be downloaded [directly from GitHub](https://github.com/payloadjs/payload/archive/master.zip), installed from [NPM](https://www.npmjs.com/), or installed from [Bower](http://bower.io/).
32
+
Payload.js can be cloned or downloaded [directly from GitHub](https://github.com/payloadjs/payload), installed from [NPM](https://www.npmjs.com/), or installed from [Bower](http://bower.io/).
-[Handlebars runtime](http://handlebarsjs.com/precompilation.html) - version depends entirely on your compiler version
49
49
50
-
**Note:** Handlebars is not required if you choose to only work with raw XHR responses, e.g. HTML returned directly from an API request.
50
+
> **Note:** Handlebars is not required if you choose to only work with raw XHR responses, e.g. HTML returned directly from an API request.
51
51
52
52
## Selectors
53
53
@@ -66,7 +66,7 @@ Payload.js selectors can also contain the `data-auto-load` attribute to cause th
66
66
67
67
## HTML5 API
68
68
69
-
The most useful feature of Payload.js is its intuitive HTML5 API. It can be used out of the box with little to no configuration and interacted with entirely from HTML. This makes Payload.js accessible to the nonjavascriptsavvy web developer.
69
+
The most useful feature of Payload.js is its intuitive HTML5 API. It can be used out of the box with little to no configuration and interacted with entirely from HTML. This makes Payload.js accessible to the non-javascript-savvy developer.
70
70
71
71
```html
72
72
<buttondata-url="/api/endpoint"
@@ -103,7 +103,7 @@ The most useful feature of Payload.js is its intuitive HTML5 API. It can be used
103
103
104
104
## Primary Methods
105
105
106
-
-`deliver(options)` - Used to initialize the initial options to Payload.js and start monitoring the Payload.js context for events; see [Payload.js Options](#payloadjs-initialization-options).
106
+
-`deliver(options)` - Used to initialize the initial options to Payload.js and start monitoring the Payload.js context for events; see [Payload.js Options](#payload-js-initialization-options).
107
107
-`apiRequest($origin)` - Automatically called when a selector is activated. May also be called explicitly by passing in a jQuery object with the proper data attributes. See [API Request Handling](#api-request-handling) for more information about this method.
108
108
-`triggerAutoLoad($element)` - Perform an API request on any DOM nodes containing the attribute `data-auto-load`. If `$element` is given, perform an API request on the given jQuery object instead of on the Payload.js `$context`.
109
109
-`publish(eventName, arguments)` - Publish a Payload.js. Any arguments given will pass through to the event handlers subscribed to the event named.
@@ -128,13 +128,14 @@ When performing an API request Payload.js will also manage showing and hiding lo
128
128
129
129
Note that DOM objects must either perform an API call by having `api.url` set (see the [API Object and HTML attributes](#api-object-and-html-attributes)) or specifying a template to load.
130
130
131
-
1.Publish events with `pre` namespace to allow any preparation work to happen.
131
+
1.Subscribe to events with the `beforeRender` namespace to modify any data before the view is rendered.
132
132
1. Invoke `apiCallback` method set in Payload.js options (see [API Callback Params](#api-callback-params)).
133
133
1. If no API URL was specified or a cached view was used, publish the API events and trigger `auto-load`.
134
134
1. Show any configured loading indicators.
135
-
1. Perform the XHR request.
135
+
1. Perform the XHR.
136
136
1. Failures will invoke the `xhrFail` callback option.
137
-
1. The `xhrAlways` callback option always gets called on XHR request completion.
137
+
1. The `xhrAlways` callback option always gets called on XHR completion.
138
+
1. The `xhrDone` callback is invoked upon a successful XHR.
138
139
1. If a template selector is defined, render the template into the specified location. If `api.loading` was set, the loading element will quickly fade out first. The `xhrDone` callback option is invoked, API events are published, and `triggerAutoLoad($target)` is called.
139
140
1. Cache the XHR response if requested.
140
141
@@ -158,30 +159,30 @@ If the API call involves making a XHR request the following additional attribute
158
159
159
160
The API object defined below is passed within the API params to the various callback methods. The various options are controlled through HTML `data-` attributes on the `$origin` object, which points to a `$target` object for template rendering.
160
161
161
-
-`href` - $origin`href` attribute; for reference
162
-
-`url` - $origin `data-url` or `action` (form) attribute; Used as API URL if set
163
-
-`method` - $origin `data-method` or `method` attribute; HTTP method to use in API call (default: `'get'`)
164
-
-`cacheRequest` - $origin `data-cache-request` attribute; if `true` flag XHR request to be cached
165
-
-`cacheResponse` - $origin `data-cache-response` attribute; if `true` use cached response from Payload.js
166
-
-`type` - jquery XHR request type (default: `'json'`)
167
-
-`selector` - $origin `data-selector` attribute; jQuery selector for the API $target that a template will be loaded into
168
-
-`template` - $origin "data-template" attribute; name of the Handlebars template to load into the location specified by `data-selector` (overrides `data-partial` if also set)
169
-
-`partial` - $origin `data-partial` attribute; name of the Handlebars partial template to load into the location specified by `data-selector`
170
-
-`events` - $origin `data-publish` attribute; space-separated list of events to have published to Payload.js subscribers
162
+
-`href` - The`href` attribute value from `$origin`; for reference and for use with an external routing component
163
+
-`url` - `$origin``data-url` or `action` (form) attribute; Used as API URL if set
164
+
-`method` - `$origin``data-method` or `method` attribute; HTTP method to use in API call (default: `'get'`)
165
+
-`cacheRequest` - `$origin``data-cache-request` attribute; if `true` flag XHR request to be cached
166
+
-`cacheResponse` - `$origin``data-cache-response` attribute; if `true` use cached response from Payload.js
167
+
-`type` - jQuery XHR request type (default: `'json'`)
168
+
-`selector` - `$origin``data-selector` attribute; jQuery selector for the API $target that a template will be loaded into
169
+
-`template` - `$origin "data-template" attribute; name of the Handlebars template to load into the location specified by `data-selector` (overrides `data-partial` if also set)
170
+
-`partial` - `$origin``data-partial` attribute; name of the Handlebars partial template to load into the location specified by `data-selector`
171
+
-`events` - `$origin``data-publish` attribute; space-separated list of events to have published to Payload.js subscribers
171
172
-`requestData` - combination of JSON serialized form data and any JSON-encoded values within $origin `data-form` attribute
172
173
-`templateData` - See [Template Data](#template-data) below
173
-
-`loading` - $origin `data-loading` attribute; if "true" (or the `loadingDefault` option is true) the `$target` element will be cleared and have the `loadingHtml` from Payload.js options inserted during API request handling.
174
+
-`loading` - `$origin``data-loading` attribute; if "true" (or the `loadingDefault` option is true) the `$target` element will be cleared and have the `loadingHtml` from Payload.js options inserted during API request handling.
174
175
175
176
### Template Data
176
177
177
178
Every Handlebars template always has the following data available:
178
179
179
-
-`app` - Any custom application data set at`Payload.appData`
180
-
-`request` - href, url, method, and cacheKey for the API call
180
+
-`app` - Any custom application data contained in`Payload.appData`
181
+
-`request` - `href`, `url`, `method`, and `cacheKey` for the API call
181
182
-`view` - A dictionary of all `data-*` attributes from `$origin`
182
183
183
184
## Payload.js Object Properties
184
185
185
-
-`options` - Current set of options (see [Payload.js Options](#payloadjs-initialization-options))
186
-
-`appData` - Object for storing custom application data; provided as `app` within template data
187
-
-`cache` - Object containing `response` cache.
186
+
-`options` - Current set of options (see [Payload.js Options](#payload-js-initialization-options))
187
+
-`appData` - Object for storing arbitrary application data; provided as `app` within template data
188
+
-`cache` - Object containing `response` cache; available for external component cache
0 commit comments