Question

您好，我正在尝试实施此symfony 3.4 RatingBundle

https://github.com/blackknight467/StarRatingBundle

我得到了这个结果

pic one

css可以正常工作，但是星星不可点击，因此js和星星之间没有链接的问题

这是我的代码#update：我已将js代码放在树枝页面中，以使代码更清晰。

html.twig

Configure

php：

Configure

controller.php

app.ApplicationServices

css：

https://github.com/blackknight467/StarRatingBundle/blob/master/Resources/public/css/rating.css

js：

https://github.com/blackknight467/StarRatingBundle/blob/master/Resources/public/js/rating.js

我的主要问题是如何在html页面中调用

.text-color {
  color: $color;
}

根据要求在new.html.twig中进行测试：

   {%  extends 'base.html.twig' %}

{% block body %}

    <h1>Lists of Posts !</h1>

    <div class="album py-5 bg-light">
        <div class="container">

            <h2>Search A Post !!</h2>

            <div class="sidebar-search">

                <div class="input-group custom-search-form">

                    <input type="text" id="search" class="form-control" placeholder="Search here">
                </div>
                <!-- /input-group -->
            </div>
            <ul class="nav" id="side-menu">
                <li>
                    <a href="#"> resultats de recherche<span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level" id="entitiesNav">
                    </ul>
                </li>
            </ul><br><br><br><br>

            <script type="text/javascript" src="{{ asset('assets/js/jquery-2.2.3.min.js') }}"></script>

            <script type="text/javascript">



                $(function(){

                    // $( '.rating' ).click(function() {
                    //     alert(parseInt($(this).find('input').val()));
                    // });


                    var labelWasClicked = function labelWasClicked(){

                        var input = $(this).siblings().filter('input');
                        if (input.attr('disabled')) {
                            return;
                        }
                        input.val($(this).attr('data-value'));

                    }

                    var turnToStar = function turnToStar(){
                        if ($(this).find('input').attr('disabled')) {
                            return;
                        }
                        var labels = $(this).find('div');
                        labels.removeClass();
                        labels.addClass('star');
                    }

                    var turnStarBack = function turnStarBack(){
                        var rating = parseInt($(this).find('input').val());

                        if (rating > 0) {
                            var selectedStar = $(this).children().filter('#rating_star_'+rating)
                            var prevLabels = $(selectedStar).nextAll();
                            prevLabels.removeClass();
                            prevLabels.addClass('star-full');
                            selectedStar.removeClass();
                            selectedStar.addClass('star-full');
                        }
                    }

                    $('.star, .rating-well').click(labelWasClicked);
                    $('.rating-well').each(turnStarBack);
                    $('.rating-well').hover(turnToStar,turnStarBack);

                });
                jQuery(document).ready(function() {
                    var searchRequest = null;
                    $("#search").keyup(function() {
                        var minlength = 1;
                        var that = this;
                        var value = $(this).val();
                        var entitySelector = $("#entitiesNav").html('');
                        if (value.length >= minlength ) {
                            if (searchRequest != null)
                                searchRequest.abort();
                            searchRequest = $.ajax({
                                type: "GET",
                                url: "{{ path('ajax_search') }}",
                                data: {
                                    'q' : value
                                },
                                dataType: "text",
                                success: function(msg){
                                    //we need to check if the value is the same
                                    if (value===$(that).val()) {
                                        var result = JSON.parse(msg);
                                        $.each(result, function(key, arr) {
                                            $.each(arr, function(id, value) {
                                                if (key === 'posts') {
                                                    if (id !== 'error') {
                                                        console.log(value[1]);
                                                        entitySelector.append('<li><b>'+value[1]+'</b><a href="/pidev_symfony-officiel/web/app_dev.php/livre/detailedlivre/'+id+'">'+'<img src="/pidev_symfony-officiel/web/livimages/'+value[0]+'" style="width: 50px; height: 70px"/>'+'</a></li>');
                                                    } else {
                                                        entitySelector.append('<li class="errorLi">'+value+'</li>');
                                                    }
                                                }
                                            });
                                        });
                                    }
                                }
                            });
                        }
                    });
                });
            </script>
            <div class="post-container">
                <div class="row">


                    <section class="featured section-padding">
                        <div class="container">
                            <div class="row">
                                <div class="col-12 text-center">
                                    <div class="heading">
                                        <h1 class="section-title">Livres</h1>
                                        <br>
                                    </div>
                                </div>

                                {% for livre in livres %}

                                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-4">
                                        <div class="featured-box">
                                            <figure>
                                                  {#<img class="img-fluid" src="{{ asset('livimages/' ~ livre.image) }}" style="width: 270px;height: 350px">#}
                                                <a href="{{ path('detailed_livre',{'id': livre.idLivre}) }}"><img class="img-fluid" src="{{ asset('livimages/' ~ livre.image) }}" style="width: 50px; height: 70px" alt=""></a>
                                            </figure>
                                            <div class="content-wrapper">
                                                <div class="feature-content">
                                                    <h4>{{ livre.libelle }}</a></h4>
                                                    <p class="listing-tagline">{{ livre.description|trim }}</p>

                                                    <p class="rating">{{ '4'|rating }}</p>


                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}

                            </div>
                        </div>

                    </section>



                </div>

            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}


{% endblock %}

Answer 1

如果我了解library的工作原理，那么我认为rating树枝过滤器仅用于显示评分。

要进行实际评分，您需要将RatingType放在表单中（就像您所做的那样），以显示该表单，然后提交并保存结果。

在您提供的树枝文件中，您似乎正在遍历Livre（我认为）实体的集合，在这种情况下，您只能查看livre的等级。现在，我看到您在4中有一个硬编码的{{ '4'|rating }}，但是我想在某个时候它应该变成{{ livre.rating|rating }}（假设您将评分得分保持在Livre中rating列下的实体）以反映实际评分。

您添加到树枝文件中的javascript代码放错了位置。就像我提到的那样，您似乎处于“查看”上下文中。要实际使用此脚本进行评分，您需要位于显示LivreType格式的页面上（因为它是其中包含RatingType字段的页面）。如果可以的话，请粘贴包含LivreType表单的树枝文件。

JavaScript代码也是不必要的，因为您应该能够使用asset twig函数从包本身（这是您粘贴到twig文件中的内容）中导入脚本。根据{{3}}，它应该看起来像这样：

<script src="{{ asset('bundles/starrating/js/rating.js') }}"></script>

如果您希望能够在查看Livre实体的集合时给出评分，恐怕您需要更改整个方法，可以通过多种方法来实现，例如显示RatingType表格，而不只是评分分数。

另一方面，我不确定您使用的库是否按预期工作。我还没有尝试过，但是从the readme file看来，该评分的实际值似乎不正确。对于5星系统（默认设置）并单击4星，我链接的代码的值为2，因为在data-value="{{ stars - star + 1 }}"中，stars为{{1 }}和5是star。

实际上，代码是正确的，只是星星的div元素按降序添加。

Answer 2

Github上的示例写道： {{someInteger | rating}} 你写 {{someInteger | rating（）}}

Answer 3

您需要从symfony之类的树枝模板中添加“评级”

<?php
    // ...
    $builder->add('rating', RatingType::class, [
        //...
        'stars' => 4,
        //...
    ]);
    // ...

jQuery无法从外部symfony捆绑

3 个答案: