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.