So, you'll always need the declarations to instantiate Behavior and
Delegator, but that is, in theory, the only in-line JavaScript you have (if
you want; it's how I tend to develop now with no big DomReady statements).
To answer your question, let me first reiterate what Behavior and Delegator
do:
- Behavior: *Instantiates* classes. It reads your markup and creates a
new instance of your class. It should always return that instance.
- Delegator: *Invokes *code based on an interaction (such as a click).
This replaces any code you would attach to a DOM element with addEvent.
So, for example, let's say that we have a tab UI. We have a Tabs class and
we need to instantiate it. Our behavior would look something like:
Behavior.addGlobalFilter('Tabs', function(element, api){
return new Tabs(api.getElements('.tab'), api.getElements('.section'));
});
(this is a super simplistic example)
But let's say you want to load your HTML and conditionally specify which
tab should be selected on startup based on which tab the user had
previously selected. Let's say, for the sake of keeping my example short,
that you're going to store the selected index in a cookie.
Behavior.addGlobalFilter('Tabs', function(element, api){
return new Tabs(api.getElements('.tab'), api.getElements('.section'), {
selected: Cookie.read('selectedIndex') || 0,
onSelect: function(index){
Cookie.write('selectedIndex');
}
});
});
And in your HTML you do something like:
<div data-behavior="Tabs">
<ul>
<li class="tab">one</li>
<li class="tab">two</li>
<ul>
<div class="sections">
<div class="section"></div>
<div class="section"></div>
</div>
</div>
This is all well and good. This is what Behavior is for. If the user
selects a tab the tab is selected and the state is stored. If they reload
the page the tab selection is preserved. Good stuff.
Now, let's say you have a Delegator in the mix. Let's say your tabs are
using the Ajax delegator to load in their content when you click them:
<div data-behavior="Tabs">
<ul>
<li class="tab"><a data-trigger="Ajax" data-ajax-options="
'target': '!div #one'
" href="one.html">one</a></li>
<li class="tab"><a data-trigger="Ajax" data-ajax-options="
'target': '!div #two'
" href="two.html">two</a></li>
<ul>
<div class="sections">
<div class="section" id="one"></div>
<div class="section" id="two"></div>
</div>
</div>
The problem is you need to load the content for the tab that got selected.
Now, you could go write more code to bind these two things together - the
Tabs behavior and the Ajax trigger, but that's a little messy. We already
have code that manages these two things, we just need a way to have the
Ajax trigger fired if the tab itself is selected.
So here you'd use the Startup delegator which allows you to conditionally
evaluate the state of the DOM and invoke a trigger.
<div data-behavior="Tabs">
<ul>
<li class="tab"><a data-trigger="Ajax"
data-ajax-options="
'target': '!div #one'
" data-behavior="Startup"
data-startup-options="
'delegators': {
'Ajax': {
'target': '!li',
'method': 'hasClass',
'arguments': ['selected'],
'value': true
}
}
" href="one.html">one</a></li>
<li class="tab selected"><a data-trigger="Ajax" data-ajax-options="
'target': '!div #two'
" data-behavior="Startup"
data-startup-options="
'delegators': {
'Ajax': {
'target': '!li',
'method': 'hasClass',
'arguments': ['selected'],
'value': true
}
}
" href="two.html">two</a></li>
<ul>
<div class="sections">
<div class="section" id="one"></div>
<div class="section" id="two"></div>
</div>
</div>
Now, this is a somewhat verbose syntax but typically you're going to be
typing it only once in some sort of loop. Anyway, the Startup behavior
evaluates your configuration and then invokes the related trigger.
On Tue, Sep 3, 2013 at 10:28 AM, underscore_05
<roquerichardn...@gmail.com>wrote:
> Hello again! Can you please post an example on how to use
>
> Behavior.Startup?
>
> Will this Behavior tends to avoid this line of codes?
>
> window.addEvent('domready', function(){
>
> var behavior = new Behavior({}).apply(document.body);
>
> var delegator = new Delegator({
>
> getBehavior: function(){ return behavior; }
>
> }).attach(document.body);
>
> });
>
>
> or just the line for new Delagator that attaches to the body?
>
> --
>
> ---
> You received this message because you are subscribed to the Google Groups
> "MooTools Users" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to mootools-users+unsubscr...@googlegroups.com.
> For more options, visit https://groups.google.com/groups/opt_out.
>
--
---
You received this message because you are subscribed to the Google Groups
"MooTools Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to mootools-users+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
