Я впервые создаю приложение с помощью Meteor. Из-за проблемы с доступностью мы хотели бы предложить пользователям две разные темы Bootswatch. Я нашел здесь очень полезное объяснение того, как переключать темы Bootswatch:

Как динамически менять темы после нажатия раскрывающегося меню тем

(который ссылается на удобную скрипку в принятом ответе: http://jsfiddle.net/82AsF/)

Я попытался разместить предоставленный javascript внутри myapp.html в теге <head>. Я также попытался поместить его в файл myapp.js. (Затем я попытался разместить во многих разных местах, чтобы посмотреть, что произойдет ;-))

Ничего из того, что я пробовал, не работает, и кажется, что это фреймворк Meteor, который, по понятным причинам, «мешает». Есть ли подход, который будет работать для переключения тем Bootswatch в приложении Meteor?

0
user3469344 27 Мар 2014 в 20:08
Я могу использовать любую из тем для bootwatch по умолчанию - работает должным образом. Это переключение тем, которое не приводит к изменению темы (без изменения ссылки в заголовке).
 – 
user3469344
27 Мар 2014 в 20:38
Итак, когда вы меняете theme-name в такой ссылке: <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/theme-name/bootstrap.min.css"> ничего не происходит?
 – 
JohnAllen
27 Мар 2014 в 20:42
У вас установлен bootstrap3? Мы не используем это, просто bootstrap-accounts-ui, который, как я полагаю, вероятно, включает bootstrap. Я бы попытался удалить пакеты начальной загрузки, кроме bootstrap-accounts-ui, затем смените тему и посмотрите, что произойдет.
 – 
JohnAllen
27 Мар 2014 в 20:44
Для исходной темы, да, я могу изменить ее на любую тему, которую я хочу, и она работает, как ожидалось, однако, когда я пытаюсь воспользоваться преимуществом, если динамическое переключение темы с использованием подхода, описанного в упомянутом вопрос, никакого динамического переключения не происходит.
 – 
user3469344
27 Мар 2014 в 20:48
Этот вопрос: stackoverflow.com/questions/10646570 заставил меня изменить функцию jquery следующим образом: $(function(){ var themesheet = $('<link href="'+themes['default']+'" rel="stylesheet" />'); themesheet.appendTo('head'); $('body').on('click', '.theme-link', function (e) { var themeurl = themes[$(this).attr('data-theme')]; themesheet.attr('href',themeurl); }); }); Теперь она динамически переключает темы bootswatch в моем приложении Meteor с помощью раскрывающегося списка - очень похоже на сайт bootswatch.
 – 
user3469344
27 Мар 2014 в 23:50

1 ответ

Лучший ответ

Динамическое переключение тем bootwatch выполняется легко, как показано в исходном вопросе: Как динамически изменять темы после нажатия раскрывающегося меню тем

Meteor (плюс iron-router в моем случае) немного усложняет это за счет карт событий и того простого факта, что динамическое изменение происходит в <head>.

Другой ответ на вопрос объясняет, как обрабатывать событие в jQuery напрямую (минуя карты событий Meteor): Как обрабатывать пользовательские события jQuery в Meteor?

В приведенном ниже фрагменте кода показано, как я объединил эти две идеи. Все работает как положено.

var themes = {
  "default": "bootstrap311/css/bootstrap.default.min.css",
  "readable" : "bootstrap311/css/bootstrap.readable.min.css",
  "slate" : "bootstrap311/css/bootstrap.slate.min.css"
}

$(function(){
  var themesheet = $('<link href="'+themes['default']+'" rel="stylesheet" />');
  themesheet.appendTo('head');
  $('body').on('click', '.theme-link', function (e) {
    var themeurl = themes[$(this).attr('data-theme')]; 
    themesheet.attr('href',themeurl);
  });
});
2
Community 23 Май 2017 в 15:20