#content
¶
…
PorterJS tries to do all the dirty work for you in trying to figure out what you want to happen. One way it operates is to use data-*
attributes on elements. Many other frameworks (we won’t mention which ones) spurn the HTML specifications and run custom attribute names. But not PorterJS. It is designed to work with HTML5 compliant source code. Here are all of the recognized attributes.
data-bind
¶<input>
and the DataStack.p.stack.get('someKey')
.<input data-bind="someKey">
data-class
¶See also .toggler
below.
<a href="#" data-class="classToBeToggled" class="toggler" data-target="someId">toggle link</a>
data-hash
¶<a data-hash="#go/to/here">Visit here</a>
data-method
¶GET
, except on a form
element that defaults to POST
GET
, POST
, PATCH
, PUT
, DELETE
<a href="/some/path" data-method="PATCH">link to call a patch</a>
data-model
¶<span data-model="someKey"></span>
or
<input data-model="someKey">
data-target
(when used on a .toggler
element)¶See also .toggler
below.
id
of the intended target.id
of the target.<a href="#" data-target="someId" class="toggler" data-class="classToBeToggled">toggle link</a>
data-target
(when used on an <input>
element)¶<form>
element to be submitted on submit.id
of the target form
.<form id="someFormId">
<input data-target="someFormId">
</form>
data-<EVENT NAME>
¶This can be used with any of the following events: click
, keyup
, keydown
, focus
, blur
, change
<input data-keyup="someValidator">
<script>
var someValidator = function (event) {
...
}
</script>
<a></a>
or [data-url]
¶By default, all <a></a>
tags will be captured to send HTTP requests asynchronously. However, you can opt out of this behavior with one of the following:
.exclude
or .ignore-self
[target]
In addition, you can create a “fake” link by setting [data-url]
on any element. This will attach a click even to it. This could be usefule, in the following example to make clickable table rows:
<table>
<tr data-url="/go/to/element/1">
...
</tr>
<tr data-url="/go/to/element/2">
...
</tr>
<tr data-url="/go/to/element/3">
...
</tr>
</table>
#content
¶…
.toggler
¶…
You can overide the default action by adding one of the following classes: ``ignore-self``, ``exclude``, or ``ignore-toggle``.
.modal-open
¶…