如何在Meteor 1.0中有条件地加载/捆绑CSS文件？

fuzzybabybunny 发表于 Dev

模糊宝贝兔子

我知道以前曾问过这个问题，但是我想知道1.0的出现是否有所改变。

我不希望Meteor将应用程序中的每个CSS文件自动捆绑在一起。我的管理页面将具有与面向客户的页面完全不同的CSS，并且使用名称空间似乎是一个过于复杂的解决方案。我如何让Meteor在某些页面上加载某些CSS文件而不在某些页面上加载某些CSS文件？

JS文件也有同样的问题。

我知道有人说这会很有用：

https://github.com/anticoders/meteor-modules

对有条件的CSS和JS的此程序包有何评论？

哥伯

您可以将CSS文件放在/ public下的某个位置，并在需要时从模板中手动添加它们。/ public下的所有内容都不会被捆绑在一起，并且URL将删除/ public，例如

创建两个文件：your_meteor_project / public / one.css和....... / two.css。您可以从客户端的http://example.com/one.css上获得这些文件（即“公共”不构成URL的一部分，就像使用流星作为普通旧式Web服务器的文档根目录一样）。

    meteor create cssSwitcher
    cd cssSwitcher/
    mkdir public
    echo 'html, body { background-color: red; }' > public/one.css
    echo 'html, body { background-color: blue; }' > public/two.css

在HTML的开头创建对辅助函数“ appropriateStylesheet”的引用：

HTML模板

    <!-- add code to the <body> of the page -->
    <body>
      <h1>Hello!</h1>
      {{> welcomePage}}
    </body>

    <!-- define a template called welcomePage -->
    <template name="welcomePage">
      <!-- add code to the <head> of the page -->
      <head>
        <title>My website!</title>
        <link rel="stylesheet" href="/{{appropriateStylesheet}}" type="text/css" />
      </head>

      <p>Welcome to my website!</p>
      <button id="red">Red</button>
      <button id="blue">Blue</button>
    </template>

创建一个辅助函数。

JavaScript：

    if (Meteor.isClient) {
      Session.set("stylesheet","red.css"); 

      Template.registerHelper("appropriateStylesheet", function() {
        return Session.get("stylesheet");
      });

      Template.welcomePage.events({
        'click #blue' : function() { Session.set("stylesheet","two.css"); },
        'click #red'  : function() { Session.set("stylesheet","one.css"); },
      });

    }

您可以对JS文件执行完全相同的操作。将它们放在/ public下，流星忽略它们。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。