I like the idea of splitting things up. One of the things I did with PureChat was have two separate javascript objects, one for business logic, and the other for template interaction only. The business logic would handle all of the ajax requests, utility functions, and define variables. So you might have files like this:
utilities.js (helper functions)
main.js (a global object holding important variables)
display.js (information and helper methods for display.template.php)
display.ui.js (user interface interaction object)
Some sample code for display.js and display.ui.js
// display.js
var DisplayObject = function()
{
this.quickReply = function(userName, message)
{
message = displayObject.validateMessage(message);
$.ajax({
url: '';
data: {userName, message},
type: 'POST',
success: function(response)
{
if (response.success === 'true') {
displayUI.showPost(response.data);
}
}
});
}
this.validateMessage = function(text)
{
// process text.
}
}
var displayObject = new DisplayObject; // Create and instance of the "class".;
// display.ui.js
var DisplayUI = function()
{
this.showPost = function(postData)
{
var html =
'<div class="post no_display">' +
'<div class="message">' +
postData.text +
'</div>' +
'<div class="userData">' +
'<ul>' +
'<li>' + postData.name + '</li>';
$.each(postData.posterInfo, function(index, data)
{
html .=
'<li>' + data + '</li>';
});
html .=
'</ul>' +
'</div>' +
'</div>';
$('.no_display').slideDown(250, function()
{
$(this).removeClass('no_display');
});
}
}
var displayUI = new DisplayUI;
Personally, I find that a lot easier to debug and modify, because the working code isn't all mixed in with the template interaction. Just my opinion. 
Modern, Free, Powerful