Я создаю модульное приложение javascript (RequireJS/Backbone) и ищу советы по передовым методам распространения URL-адресов на стороне сервера в приложение JS для использования в шаблонах на стороне клиента, запросах API и т. д.
Внедрить его в базовый шаблон, который запускает приложение Javascript? Запрос API специально для этого?
Хотелось бы услышать решения, которые использовали другие. Спасибо!
Вы можете отобразить тег <script> в теге body, определить модуль и поместить туда свои URL-адреса любым удобным для вас способом.
После этого вы можете потребовать его внутри своих модулей (файлов .js).
HTML (например, макет вашего приложения):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Inline RequireJS define</title>
</head>
<body>
<h1 id="foo-holder"></h1>
<a id="sign-up-link" href="#"></a>
<script>
// This is rendered by your server-side application:
define('data/config', function(require, exports, module) {
exports.Url = {
HOME: 'https://mysite.com',
SIGN_IN: 'https://mysite.com/sign-in',
SIGN_UP: 'https://mysite.com/sign-up',
LOG_OUT: 'https://mysite.com/log-out'
};
exports.foo = 'bar';
});
</script>
</body>
</html>
JavaScript (где-то в вашем модуле):
// This is somewhere in your JavaScript module
require(['data/config'], function(Config) {
$('#foo-holder').text(Config.foo);
$('#sign-up-link')
.text(Config.Url.SIGN_UP)
.attr('href', Config.Url.SIGN_UP);
});
Еще один трюк можно сделать с привязкой атрибутов.
В вашем макете:
<a data-url="HOME" href="#">Home</a>
<a data-url="SIGN_IN" href="#">Sign In</a>
<a data-url="SIGN_UP" href="#">Sign Up</a>
<a data-url="LOG_OUT" href="#">Log Out</a>
<script>
// This is rendered by your server-side application:
define('data/config', function(require, exports, module) {
exports.Url = {
HOME: 'https://mysite.com',
SIGN_IN: 'https://mysite.com/sign-in',
SIGN_UP: 'https://mysite.com/sign-up',
LOG_OUT: 'https://mysite.com/log-out'
};
exports.foo = 'bar';
});
</script>
В вашем файле JavaScript:
// This is somewhere in your JavaScript module
require(['data/config'], function(Config) {
$('a[data-url]').each(function() {
var $a,
urlConstant,
url;
$a = $(this);
urlConstant = $a.data('url');
url = Config.Url[urlConstant];
if(url) {
$a.attr('href', url);
}
});
});
