自定义循环中每个元素的样式[symfony2]


Custom the style of each element in a loop [symfony2]

我在我的索引页呈现从我的数据库类别列表,我不知道如何给每个类别一个独特的风格,很容易给所有类别一个独特的风格,但如何个性化的风格,每一个。

每个类别都在一个网格块中呈现,每个网格块都有自己的样式。

现在的情况是,每个类别都是由数据库中的类别数量重复的。

这是我的小树枝文件:

{% for entity in entities %}
            <div class="global-wrap">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="row row-wrap">
                                <div class="col-xs-12 col-md-8">
                                    <div class="thumb">
                                        <a class="hover-img" href="{{ path('categorieProducts', { 'entity' : entity.id }) }}">
                                            <img height="357px" width="100%" src="{{  asset('bundles/flyplatform/img/blog1.jpg')}}" alt="Image Alternative text" title="" />
                                            <div class="hover-inner hover-inner-block hover-inner-bottom hover-inner-bg-black hover-hold">
                                                <div class="text-small">
                                                    <h5 style="font-family: Lato, sans-serif; text-align: center;font-size: 34px;font-weight: 500">{{ entity.name }}</h5>
                                                    <h6 style="text-align: right;font-family: Lato, sans-serif;font-size: 20px;font-weight: 400">77497 reviews</h6>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </div>

                                <div class="col-xs-6 col-md-4">
                                    <div class="thumb">
                                        <a class="hover-img" href="{{ path('categorieProducts', { 'entity' : entity.id }) }}">
                                            <img height="357px" width="100%" src="{{  asset('bundles/flyplatform/img/blog1.jpg')}}"  alt="Image Alternative text" title="" />
                                            <div class="hover-inner hover-inner-block hover-inner-bottom hover-inner-bg-black hover-hold">
                                                <div class="text-small">
                                                    <h5>{{ entity.name }}</h5>
                                                    <h6>54531 reviews</h6>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                                <div class="col-xs-6 col-md-4">
                                    <div class="thumb">
                                        <a class="hover-img" href="{{ path('categorieProducts', { 'entity' : entity.id }) }}">
                                            <img height="357px" width="100%" src="{{  asset('bundles/flyplatform/img/blog1.jpg')}}" alt="Image Alternative text" title="" />
                                            <div class="hover-inner hover-inner-block hover-inner-bottom hover-inner-bg-black hover-hold">
                                                <div class="text-small">
                                                    <h5>{{ entity.name }}</h5>
                                                    <h6>68703 reviews</h6>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </div>

                                <div class="col-xs-12 col-md-8">
                                    <div class="thumb">
                                        <a class="hover-img" href="{{ path('categorieProducts', { 'entity' : entity.id }) }}">
                                            <img height="357px" width="100%" src="{{  asset('bundles/flyplatform/img/grid1.png')}}" alt="Image Alternative text" title="" />
                                            <div class="hover-inner hover-inner-block hover-inner-bottom hover-inner-bg-black hover-hold">
                                                <div class="text-small">
                                                    <h5 style="font-family: Lato, sans-serif; text-align: center;font-size: 34px;font-weight: 500">{{ entity.name }}</h5>
                                                    <p style="text-align: right;font-family: Lato, sans-serif;font-size: 20px;font-weight: 400">44391 reviews</p>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
{% endfor %}

.

 public function categorycityAction()
    {
        $em = $this->getDoctrine()->getManager();
        $entities = $em->getRepository('FLYBookingsBundle:Categories')->findAll();
        return $this->render('FLYBookingsBundle:Post:categorycity.html.twig', array('entities' => $entities));
    }

添加:

@zizoujab的答案给了我一个想法,在页面索引中分别呈现每个类别,每个类别都有自己的控制器动作,然后对于每个控制器动作,我可以创建一个查询生成器,将搜索数据库的类别id。

但是我有以下错误:

在呈现模板期间抛出异常("控制器"飞行控制器' xxxxxxxBundle ' '为PostController: categorylondonAction ()要求您为"$entity"参数提供一个值(因为没有默认值或因为有一个非可选参数在这个之后)")

index.html.twig

 {% render (controller('FLYBookingsBundle:Post:categorylondon')) %}

PostRepository.php

伦敦目录有数据库中的id 1

public function byLondon($entity)
{
    $qb = $this->createQueryBuilder('u')
        ->select('u')
        ->Where('u.id = 1')
        ->orderBy('u.id')
        ->setParameter('entity', $entity);
    return $qb->getQuery()->getResult();
}

.

PostController.php

public function categorylondonAction($entity)
{
    $em = $this->getDoctrine()->getManager();
    $entities = $em->getRepository('FLYBookingsBundle:Categories')->byLondon($entity);
    return $this->render('FLYBookingsBundle:Post:categorylondon.html.twig', array('entities' => $entities));
}

首先出于可读性的考虑,你可以在一个单独的.html.twig文件中编写单个类别的模板(所有的html代码在for循环中),我们称它为category_item.html.twig

你的代码现在看起来像这样:

{% for entity in entities %}
    {% include 'path_to_category_item.html.twig' %}
{% endfor %}

对于独特的样式,我想不出一种方法可以为每个类别提供自定义样式,特别是如果类别计数是动态的。

因此,要么为样式提供随机值,要么将样式存储在每个类别中。就像这样,您将像这样传递每个类别的样式:

{% for entity in entities %}
      {% include 'path_to_category_item.html.twig' with {'style': entity.style} %}
{% endfor %}

我将在Category实体中创建一个新属性,用于存储css类。然后,在循环中使用这个属性,并在CSS文件中配置这些CSS类。

实体:

class Category
{
    private $cssClass;
}

视图:

{% for entity in entities %}
    [...]
    <div class="category-container {{entity.cssClass }}">
        [...]
    </div>
    [...]
{% endfor %}

CSS文件:

.category-container {
    // here the global css properties common to all the categories
}
.category-01 {
    // here the css properties unique to this category
    [...]
}

我终于解决了我的问题。

这是我如何渲染我的控制器在index.html.twig:

{% render (controller('FLYBookingsBundle:Post:categorylondon' , { 'id': 1 })) %}

控制器:

public function categorylondonAction($id)
    {
        $em = $this->getDoctrine()->getManager();
        $entities = $em->getRepository('FLYBookingsBundle:Categories')->findBy(array('id' => $id));
        return $this->render('FLYBookingsBundle:Post:categorylondon.html.twig', array('entities' => $entities));
    }

感谢@VaN和@zizoujab的帮助。