-
Notifications
You must be signed in to change notification settings - Fork 1
Standard Behaviors
There are a number of pre-packaged behaviors available for NinjaScript. These can be used in two general forms:
Ninja.behavior({
"#my_el": Ninja.submitsAsAjax,
"#other": Ninja.submitsAsAjax({busyElement: "#busy"})
})
The first uses all the defaults for the behaviors, the second lets you pass configuration details (in this case the target for a busy overlay.) Notice that in the first form, you’re simply passing a function reference in to Ninja.behavior
, which will be called without arguments to get the behavior.
The behaviors that ship with Ninjascript:
- Ninja.submitsAsAjax()
- The targeted link or form is set up so that it submits via a XMLHTTPRequest object. We expect back a javascript snippet which is eval’d. (yeah, yeah) This is a Metabehavior for submitsAsAjaxForm and submitsAsAjaxLink. In this case, the Metabehavior looks to see if the element under consideration is a link or a form and applies the appropriate behavior.
- Ninja.submitsAsAjaxLink()
- Converts a link to send its GET request via Ajax – we assume that we get Javascript back, which is eval’d. While we’re waiting, we’ll throw up a busy overlay if configured to do so. By default, we don’t use a busy overlay.
- Ninja.submitsAsAjaxForm()
- Converts a form to send its request via Ajax – we assume that we get Javascript back, which is eval’d. We pull the method from the form: either from the method attribute itself, a data-method attribute or a Method input. While we’re waiting, we’ll throw up a busy overlay if configured to do so. By default, we use the form itself as the busy element.
- Ninja.becomesAjaxLink()
- This is a chaining of
submitsAsAjax
andbecomesLink
. Applied to a form (normally without visible inputs), it yanks the form itself out of the DOM, replacing it with an
<a href='#'>...</a>
that will submit the original form via Ajax.
|\2.Configuration|.default|
|retainAttributes|An array of strings that lists the attributes to copy from the original form into the link.|[“id”, “class”, “lang”, “dir”, “title”, “rel”, “data-.*”]|
|busyElement|How to find the element that should be overlayed with a spinner|undefined – use the resulting link|
Configuration | |
---|---|
busyElement | Determines how we find the element to overlay with a busy spinner |
In general, you’ll want to use submitsAsAjax instead, since it’ll behave correctly regardless.
Configuration | |
---|---|
busyElement | Determines how we find the element to overlay with a busy spinner |
In general, you’ll want to use submitsAsAjax instead, since it’ll behave correctly regardless.
Configuration | |
---|---|
busyElement | Determines how we find the element to overlay with a busy spinner |
.dt Ninja.becomesLink()
.dd Applied to a form (normally without visible inputs), it yanks the form itself out of the DOM, replacing it with an
<a href='#'>...</a>
that will submit the original form. The result is that you can use a link to do non-GET requests, but still have it degrade nicely when Javascript isn’t available. Handles image submits as well.
Configuration:
retainAttributes
An array of strings that lists the attributes to copy from the original form into the link.
[“id”, “class”, “lang”, “dir”, “title”, “rel”, “data-.*”]
Ninja.decays()
A UI behavior: this element should survive for a little while and then disappear, or else vanish when clicked on.
Configuration:
lifetime
How long the element survives before being removed automatically (in millis)
10000
diesFor
The duration of the “die” animation (ms)
600