0

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

单击主题下拉菜单后如何动态更改主题

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

我尝试将提供的 javascript 放在<head>标签中的 myapp.html 中。我还尝试将它放在 myapp.js 文件中。（然后我尝试放置在许多不同的地方，看看会发生什么;-)）

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

4

1 回答 1

2

动态切换 bootswatch 主题很容易完成，如最初引用的问题所示： 单击主题下拉菜单后如何动态更改主题

Meteor（在我的例子中加上铁路由器）通过事件映射和动态变化发生在<head>.

另一个已回答的问题解释了如何直接在 jQuery 中处理事件（绕过 Meteor 事件映射）： 如何在 Meteor 中处理自定义 jQuery 事件？

下面的代码片段显示了我如何将这两个想法结合在一起。这一切都按预期工作。

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);
  });
});
于 2014-03-28T12:29:03.357 回答