如何为mongo数据库中的每个文档创建一个新的HTML类 [英] How do I make a new HTML class for every document in a mongo database

问题描述

我有一个mongodb设置，其中有任何视频游戏的文件。每个文档都包含有关游戏的信息，如标题等。我想将每个文档显示为带有html和css的卡片，显示有关它的信息。每张卡都需要有一个游戏图像，所以我指定并将图像路径作为文档中的一个类别。现在我需要为每个文档都有一个html类（你会在div中调用它），这样我就可以调用该文档中指定的图像路径来显示每张卡的背景。如何为数据库中的每个文档创建一个新的html类？



这是我使用的一些代码：

I have a mongodb setup where there any documents for video games. Each document contains information about the game like the title, etc. I want to display each document as a card with html and css, displaying the information about it. Each card needs to have an image of the game on it, so I specified and image path as one of the categories in the document. Now I need to have an html class (the kind you would call to in a div) for each document so I can call that image path specified in that document to display that background for each card. How can I have a new html class made for every document in the database?

Here is some code I used:

<template name="popularGames">
  <div id="gameBackround" class="col-lg-2 popular-games view view-first">
    <div class="mask">
      <h2>{{title}}</h2>
      <p>Amount of groups playing this title now: 11,075</p>
      <a href="#" class="info">Join Lobby</a>
    </div>
  </div>
  <style>
    .popular-games{
      background-image: url( {{background}} );
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
    }
  </style>
</template>

如你所见我试图使用mongodb文档中的背景属性来更改单个卡的背景，但它会更改所有卡的背景，因为所有卡都链接到一个类，因此一个背景。我怎么能拥有它，所以每个单独的文件都有一个班级？



我尝试了什么：



我尝试使用流星模板在类中添加，然后使用样式标签编辑类，但这个解决方案根本没有帮助

As you can see I am tried to use a background attribute from the mongodb document to change the background of an individual card but it changes the background for all the cards because all the cards are linked to one class, therefore one background. How can I have it so there is a class for every individual document?

What I have tried:

I have tried using meteor templates to add in the class and then edit the class with style tags but it this solution does not help really at all

推荐答案

我不认为你想要一个独特的CSS类。

如果，这是一个很大的if，我已经理解正确，你想拥有相同的风格和HTML页面的布局，但主要< div>的背景图像不同元素。

所以基本上你的CSS文件应该是静态的，而不是为你想要显示的每个游戏而改变，只有< div>的背景图像。应该改变。



你试过这样做吗？

I don't think you want a unique CSS class for this.
If, and that is a big if, I have understood you correctly, you want to have the same style and layout for your HTML page, but with a different background image for the main <div> element.
So basically your CSS file should be static and not change for each game you want to show, only the background image of the <div> should change.

Have you tried do do something like this?

<div class="game" style="background-image:url( {{background}} )">
    <!-- Other elements-->
</div>

由于一些奇怪的原因，我键入'删除'而不是'url'。必须缺少咖啡。

For some odd reason I typed 'removed' instead of 'url'. Must be lack of coffee.

这篇关于如何为mongo数据库中的每个文档创建一个新的HTML类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！