Page 1 of 1

Javscript dependencies in composite view

Posted: Tue Aug 12, 2008 9:04 am
by inghamn
How do you ya'll deal with Javascript and CSS dependencies in composite views?

I've recently started incorporating Yahoo's YUI library into my applications. (I really like their library, BTW, it fits very well with my style of applications.) Now I'm starting to try to figure out how best to deal with all the dependencies their various components require.

Various YUI components usually require a few other javascript files and a few CSS files. Have ya'll run into wanting your view partials to add styles and javascript to the surrounding template?

For my part, my problem stems from using composition to assemble the view partials inside a Template. A typical controller for me looks like:

Code: Select all

 
$template = new Template();
$template->title = 'Dashboard';
 
$pastDue = new TaskList(array('status'=>'Past Due'));
$template->blocks[] = new Block('tasks/taskTable.inc',array('taskList'=>$pastDue,'title'=>'Past Due'));
 
$range = array('start'=>time(),'end'=>strtotime('+30 day'));
$thisMonth = new TaskList(array('dueDate'=>$range));
$template->blocks[] = new Block('tasks/taskTable.inc',array('taskList'=>$thisMonth,'title'=>'Next 30 Days'));
 
echo $template->render();
 
The taskTable block looks like:

Code: Select all

 
<div class="interfaceBox">
    <?php echo $title; ?>
    <table>
    <tr>
        <th>Task</th>
        <th>Status</th>
        <th>Due</th>
    </tr>
    <?php
        foreach($this->taskList as $task)
        {
            $name = View::escape($task->getName());
            echo "
            <tr>
                <td><a href=\"{$task->getURL()}\">$name</a></td>
                <td>{$task->getStatus()}</td>
                <td>{$task->getDueDate('n/j/Y')}</td>
            </tr>
            ";
        }
    ?>
    </table>
</div>
 
Where I'm reusing the same Block (view partial), but with different data. In order to inject any extra, required javascript into the template it looks like I either have to:
* Do it in the controller
* or somehow find some way to allow the Blocks to reference the template

I'm not crazy about doing stuff like

Code: Select all

 
$template = new Template();
$template->appendScript('/js/yui/build/utilities/utilities.js');
$pastDue = new TaskList(array('status'=>'Past Due'));
$template->blocks[] = new Block('tasks/taskTable.inc',array('taskList'=>$pastDue,'title'=>'Past Due'));
echo $template->render();
 
That seems like the controller would need to know about any JavaScript requirements of the view ahead of time. Not very fun for adding fancy AJAX stuff to the view down the road. But I can't seem to wrap my head around a way to reference the Template object from inside a Block.

Re: Javscript dependencies in composite view

Posted: Tue Aug 12, 2008 9:01 pm
by alex.barylski
Two solutions:

1. Include the dependecies inline with your HTML code -- I don't think <link> is valid XHTML so if that is important to you won't work
2. Include the JS dependencies and using inline JS immediately after update the DOM and include the CSS that way

Of course there are other techniques but those are really dependent upon your architecture...

Re: Javscript dependencies in composite view

Posted: Tue Aug 12, 2008 9:52 pm
by Christopher
I like to use a Response object. That way I can set headers or add scripts/styles as needed in any View. I put layout code and then the final response to the browser outside the Controllers and after they have run. That way the Views/partials can provide information to the layout and Response -- they sort everything out at the end.

Re: Javscript dependencies in composite view

Posted: Wed Aug 13, 2008 8:04 am
by inghamn
Much obliged.

I guess it's finally time to try and split my Template class into seperate Layout and Resonse classes. Whee!