Question

我是第一次使用Meteor构建应用程序。由于可访问性问题，我们希望为用户提供两种不同的Bootswatch主题。我在这里找到了一个非常有用的解释如何切换Bootswatch主题：

How to dynamically change themes after clicking a drop down menu of themes

（在引用的答案中引用了一个方便的小提琴：http://jsfiddle.net/82AsF/）

我尝试将提供的javascript放在<head>标记中的myapp.html中。我也尝试将它放在myapp.js文件中。（然后我尝试放置在许多各种各样的地方只是为了看看会发生什么;-)）

我没有尝试过任何工作，似乎Meteor框架可以理解为“妨碍”。有没有一种方法可以用于在Meteor应用程序中切换Bootswatch主题？

Answer 1

动态切换bootswatch主题很容易完成，如最初引用的问题所示：How to dynamically change themes after clicking a drop down menu of themes

Meteor（在我的情况下加上铁路由器）通过事件地图以及<head>中发生动态变化的简单事实使这一点变得复杂。

另一个已回答的问题解释了如何直接处理jQuery中的事件（绕过Meteor事件地图）：How to handle custom jQuery events in 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);
  });
});

如何在Meteor中切换Bootswatch主题？

1 个答案: