Skip to content

Commit 18e1b28

Browse files
committed
v0.7.0
* 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
1 parent 598de4b commit 18e1b28

4 files changed

Lines changed: 756 additions & 958 deletions

File tree

README.md

Lines changed: 27 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55
[![Bower version](https://img.shields.io/bower/v/payloadjs.svg)](https://github.com/payloadjs/payload)
66
[![MIT Licensed](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
77

8-
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.
99

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.
1111

1212
## Table of Contents
1313

@@ -17,7 +17,7 @@ When DOM objects imbued with Payload.js's selectors are activated, a call to `Pa
1717
- [Dependencies](#dependencies)
1818
- [Selectors](#selectors)
1919
- [HTML5 API](#html5-api)
20-
- [Payload.js Initialization Options](#payloadjs-initialization-options)
20+
- [Payload.js Initialization Options](#payload-js-initialization-options)
2121
- [Primary Methods](#primary-methods)
2222
- [Helper Methods](#helper-methods)
2323
- [API Request Handling](#api-request-handling)
@@ -29,7 +29,7 @@ When DOM objects imbued with Payload.js's selectors are activated, a call to `Pa
2929

3030
## Installation
3131

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/).
3333

3434
### Install from NPM
3535

@@ -47,7 +47,7 @@ $ bower install payloadjs --save
4747
- [jQuery](https://jquery.com/) >= v1.7
4848
- [Handlebars runtime](http://handlebarsjs.com/precompilation.html) - version depends entirely on your compiler version
4949

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.
5151
5252
## Selectors
5353

@@ -66,7 +66,7 @@ Payload.js selectors can also contain the `data-auto-load` attribute to cause th
6666

6767
## HTML5 API
6868

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 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.
7070

7171
```html
7272
<button data-url="/api/endpoint"
@@ -103,7 +103,7 @@ The most useful feature of Payload.js is its intuitive HTML5 API. It can be used
103103

104104
## Primary Methods
105105

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).
107107
- `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.
108108
- `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`.
109109
- `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
128128

129129
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.
130130

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.
132132
1. Invoke `apiCallback` method set in Payload.js options (see [API Callback Params](#api-callback-params)).
133133
1. If no API URL was specified or a cached view was used, publish the API events and trigger `auto-load`.
134134
1. Show any configured loading indicators.
135-
1. Perform the XHR request.
135+
1. Perform the XHR.
136136
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.
138139
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.
139140
1. Cache the XHR response if requested.
140141

@@ -158,30 +159,30 @@ If the API call involves making a XHR request the following additional attribute
158159

159160
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.
160161

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
171172
- `requestData` - combination of JSON serialized form data and any JSON-encoded values within $origin `data-form` attribute
172173
- `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.
174175

175176
### Template Data
176177

177178
Every Handlebars template always has the following data available:
178179

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
181182
- `view` - A dictionary of all `data-*` attributes from `$origin`
182183

183184
## Payload.js Object Properties
184185

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

Comments
 (0)