Question

我有兴趣做一些条件格式，并认为最好的方法是做一些像：

内部 CSS 文档

{{#if something }}
    /* some css */

{{else}}
    /* some other css */

{{/if}}

但是我搜索了一下，却发现了 Django 相关的东西。这可能在车把或任何其他 js 库中吗？

注意：我使用 Meteor 。

Answer 1

在CSS中不是原生的，没有。但是看看SASS：http://sass-lang.com/或LESS：http://lesscss.org，这两个CSS预处理器可以做你想要的事情

Answer 2

有可能实现你想要的，因为毕竟模板引擎生成文本，上下文决定它是否应该被解释为HTML，SVG或CSS。

我使用的技术有点违反直觉，因为它使用样式标记，我们已经被教导不要将CSS嵌入到HTML页面中，但是这个建议的目的是分离HTML和CSS ，我将要解释的例子中仍然如此。

假设您拥有一组具有4个属性的项目，这些属性与您在屏幕上呈现它们的方式相关。

text：内容字符串。
color1和color2：表示HTML颜色的字符串。
gradient：布尔值;如果为true，则使用带有color1和color2的背景渐变，然后在悬停时反转渐变;如果为false，则使用color1作为背景颜色，然后使用color2悬停。

让我们使用这个模式填充一个集合。

Items=new Collection("items");
for(var i=0;i<10;i++){
    Items.insert({
        text:"Item "+i,
        color1:"#"+Random.hexString(6),
        color2:"#"+Random.hexString(6),
        gradient:Random.choice([false,true])
    });
}

现在我们定义一个模板来迭代我们的集合。

<template name="itemsList">
    <ul class="items-list">
        {{#each items}}
            {{> item}}
        {{/each}}
    </ul>
</template>

这是最有趣的部分：我们使用样式标记来定义由专用子模板生成的内联CSS。

itemClass模板传递当前上下文，该上下文是被迭代的项目。

<template name="item">
    <li class="item item-{{_id}}">
        <style scoped>
            {{> itemClass}}
        </style>
        {{text}}
    </li>
</template>

我们的模板根据当前项目的属性生成CSS：条件格式最后！由于我们使用的是Meteor，你的格式化也会被反应，这有多酷？

<template name="itemClass">
  height:64px;
  .item-{{_id}}{
    {{#if gradient}}
  background:linear-gradient(to bottom, {{color1}} 5%, {{color2}} 100%);
    {{else}}
  background-color:{{color1}};
    {{/if}}
  }
  .item-{{_id}}:hover,.item-{{_id}}:focus{
    {{#if gradient}}
  background:linear-gradient(to bottom, {{color2}} 5%, {{color1}} 100%);
    {{else}}
  background-color:{{color2}};
    {{/if}}
  }
</template>

注意：我正在使用样式标记的scoped属性，该属性告诉浏览器本节中定义的格式是父元素（本例中为li.item）的本地格式，这非常有意义。

http://www.w3schools.com/tags/att_style_scoped.asp

然而目前仅支持Firefox，因此在其他浏览器中，样式标记会生成普通的旧全局CSS，我们需要一个回退：这就是为什么我用项目的_id来装饰类名。

如果所有浏览器都支持scoped属性，我们可以直接删除项目 - {{_ id}}类并直接设置样式类，并且它会按预期工作！

Answer 3

以下是在流星中执行此操作的几种方法：

使用班助手

<template name="hello">
  <p class={{excitedClass}}>hello world</p>
</template>

Template.hello.excitedClass = function () {
  return Session.equals('excited', true) && 'excited';
};

模板助手根据会话变量的值确定类。您还可以将此用于其他属性，如样式。

在模板中使用条件

<template name="hello">
  {{#if excited}}
    <p class="excited">hello world</p>
  {{else}}
    <p>hello world</p>
  {{/if}}
</template>

Template.hello.excited = function () {
  return Session.get('excited');
};

模板根据会话变量的值选择要呈现的元素版本。

Answer 4

阅读之后我自己的答案是创建CSS静态类并使用把手更改HTML元素的类。以下是两个例子：

第一个如果简单的话。主要用途是改变整个部件的风格。

<template name="mainPage" class={{somePageClass}}>
    Main page content
</template>

On Meteor你会做类似

的事情

Template.mainPage.somePageClass = function(){
    //some logic
   return someClass;
};

下一个案例更有趣，要求列表中的每个元素都具有属性类（例如some_element.class = "classX"）。

<template name="subTemplate">
    {{#each someList}}
        <div class={{class}}>
            Element content
        </div>
    {{/each}}
</template>

通过这种方式，您可以根据特定元素引发样式。例如，根据社交页面中的帖子类型或其他内容更改背景的颜色。

Answer 5

您可以直接使用css样式给出参数。我用handelbarjs尝试了一下，效果很好。

<style>
.invoice-box {
    max-width: 800px;
    padding: 30px;
    font-size: 16px;
    line-height: 24px;
    font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
    color: #555;
    max-height: 560px;    
    zoom: {{ zoom }};    
}

你能在css文件中使用handlebars.js变量吗？

5 个答案:

使用班助手

在模板中使用条件