You have to make several changes to make it work for you, detail them below.Archive main.jsReplace the last define for one require because it's the way to get the unitsrequire.config({
baseUrl: 'js',
paths : {
jquery : ['libs/jquery-1.12.0.min',
'libs/jquery-2.2.0.min'],
IndexTpl: 'app/Index_Tpl',
IndexCtrl: 'app/Index_Ctrl',
MenuTpl: 'app/Menu_Tpl',
MenuCtrl: 'app/Menu_Ctrl'
},
shim: {
IndexTpl: ['jquery'],
MenuTpl: ['jquery']
}
});
require(['IndexTpl'], function (index){
index.template();
});
Archive Index_Tpl.jsCapture the click button and inside use require to obtain the reference to the template index and execute the template
You should also change how to identify the button by changing the attribute idby an attribute datadefine(['IndexCtrl'], function (IndexCtrl){
var index_page = {
template: function (){
var titulo, cuerpo;
titulo = IndexCtrl.titulo;
cuerpo = IndexCtrl.cuerpo;
var html = '<h1>'+ titulo +'</h1>'+
'<p>' + cuerpo + '</p>'+
'<button data-action="btn_menu">Ir al Menu</button>';
$('#contenedor').html(html);
$('button[data-action="btn_menu"]').on('click', function (){
require(['MenuTpl'], function(menu){
menu.template();
});
});
}
};
return {
template: index_page.template
};
});
Archive Menu_Tpl.jsWe would make the same changes as in Index_tpl.jsdefine(['MenuCtrl'], function (MenuCtrl){
var menu_page = {
template: function (){
var titulo, cuerpo;
titulo = MenuCtrl.titulo;
cuerpo = MenuCtrl.cuerpo;
var html = '<h1>'+ titulo +'</h1>'+
'<p>' + cuerpo + '</p>'+
'<button data-action="btn_index">Ir al index</button>';
$('#contenedor').html(html);
$('button[data-action="btn_index"]').on('click', function (){
require(['IndexTpl'], function(index) {
index.template();
});
});
}
};
return {
template: menu_page.template
};
});
In full code is hung in https://github.com/rsciriano/SO-SPA-requirejs RecommendationsSomething we have to be very aware of when we face a problem is that We must not reverse the wheel And I think that's what you might be doing. (Excuse me for being so direct, I do not intend to offend you, it is something that I also tell myself)I recommend you use one of the many frameworks SPA that exist, https://angularjs.org/ , http://aurelia.io/ , ... provide numerous advantages (system templates, binding, routing, injection of dependencies, ...Personally chose AngularJs because it is very widespread in the community, it is very powerful and encouraged you to have your code ordered with the management of modules, injection of dependencies.As for the asynchronous load of elements (one of the functions of requirejs) has to be very justified (for example for very large applications) because, among other things, it adds a lot of complexity.
