Added template loading through AJAX

This commit is contained in:
Marcin Kurczewski
2014-09-02 09:36:42 +02:00
parent 5573c49985
commit 978d22de67
9 changed files with 197 additions and 134 deletions

View File

@ -3,6 +3,7 @@ App.Presenters = App.Presenters || {};
App.Presenters.LoginPresenter = function(
jQuery,
util,
topNavigationPresenter,
messagePresenter,
auth,
@ -13,7 +14,12 @@ App.Presenters.LoginPresenter = function(
var $el = jQuery('#content');
var $messages;
var template = _.template(jQuery('#login-form-template').html());
var template;
util.loadTemplate('login-form').then(function(html) {
template = _.template(html);
render();
});
var eventHandlers = {
@ -41,8 +47,6 @@ App.Presenters.LoginPresenter = function(
if (appState.get('loggedIn'))
router.navigateToMainPage();
render();
function render() {
$el.html(template());
$el.find('form').submit(eventHandlers.loginFormSubmit);

View File

@ -3,6 +3,7 @@ App.Presenters = App.Presenters || {};
App.Presenters.RegistrationPresenter = function(
jQuery,
util,
topNavigationPresenter,
messagePresenter,
api) {
@ -10,7 +11,12 @@ App.Presenters.RegistrationPresenter = function(
topNavigationPresenter.select('register');
var $el = jQuery('#content');
var template = _.template(jQuery('#registration-form-template').html());
var template;
util.loadTemplate('registration-form').then(function(html) {
template = _.template(html);
render();
});
var eventHandlers = {
@ -50,8 +56,6 @@ App.Presenters.RegistrationPresenter = function(
},
};
render();
function render() {
$el.html(template());
$el.find('form').submit(eventHandlers.registrationFormSubmit);

View File

@ -1,10 +1,15 @@
var App = App || {};
App.Presenters = App.Presenters || {};
App.Presenters.TopNavigationPresenter = function(jQuery, appState) {
App.Presenters.TopNavigationPresenter = function(util, jQuery, appState) {
var selectedElement = null;
var template = _.template(jQuery('#top-navigation-template').html());
var template;
util.loadTemplate('top-navigation').then(function(html) {
template = _.template(html);
render();
});
var $el = jQuery('#top-navigation');
var eventHandlers = {
@ -14,7 +19,6 @@ App.Presenters.TopNavigationPresenter = function(jQuery, appState) {
};
appState.startObserving('loggedIn', 'top-navigation', eventHandlers.loginStateChanged);
render();
function select(newSelectedElement) {
selectedElement = newSelectedElement;

56
public_html/js/Util.js Normal file
View File

@ -0,0 +1,56 @@
var App = App || {};
App.Util = (function(jQuery) {
var templateCache = {};
function loadTemplate(templateName) {
return loadTemplateFromCache(templateName)
|| loadTemplateFromDOM(templateName)
|| loadTemplateWithAJAX(templateName);
}
function loadTemplateFromCache(templateName) {
if (templateName in templateCache) {
return new Promise(function(resolve, reject) {
resolve(templateCache[templateName]);
});
}
}
function loadTemplateFromDOM(templateName) {
var $template = jQuery('#' + templateName + '-template');
if ($template.length) {
return new Promise(function(resolve, reject) {
resolve($template.html());
});
}
return null;
}
function loadTemplateWithAJAX(templateName) {
return new Promise(function(resolve, reject) {
var templatesDir = '/templates';
var templateUrl = templatesDir + '/' + templateName + '.tpl';
var templateString;
$.ajax({
url: templateUrl,
method: 'GET',
success: function(data, textStatus, xhr) {
resolve(data);
},
error: function(xhr, textStatus, errorThrown) {
console.log(Error('Error while loading template ' + templateName + ': ' + errorThrown));
reject();
},
});
});
}
return {
loadTemplate: loadTemplate,
};
});
App.DI.registerSingleton('util', App.Util);