点赞和踩

由于每一行都是一个独立的组件，因此可以轻松添加点赞和踩功能，并跟踪哪些项目已被投票。这使用 LiveAction 通过 Ajax 保存所有内容。

香蕉 🍌	票数：42
苹果 🍎	票数：88
汉堡包 🍔	票数：90
西瓜 🍉	票数：23
奶酪 🧀	票数：57
比萨 🍕	票数：81
椒盐卷饼 🥨	票数：25
甜甜圈 🍩	票数：40
菠萝 🍍	票数：59
爆米花 🍿	票数：49
鸡蛋 🍳	票数：10
Taco 🌮	票数：50
冰淇淋 🍦	票数：63
曲奇 🍪	票数：85

src/Twig/Components/FoodVote.php

// ... use 语句已隐藏 - 点击显示

use App\Entity\Food; use App\Repository\FoodRepository; use Symfony\Bundle\FrameworkBundle\Controller\AbstractController; use Symfony\UX\LiveComponent\Attribute\AsLiveComponent; use Symfony\UX\LiveComponent\Attribute\LiveAction; use Symfony\UX\LiveComponent\Attribute\LiveArg; use Symfony\UX\LiveComponent\Attribute\LiveProp; use Symfony\UX\LiveComponent\DefaultActionTrait;


#[AsLiveComponent]
class FoodVote extends AbstractController
{
    use DefaultActionTrait;

    #[LiveProp]
    public Food $food;

    #[LiveProp]
    public bool $hasVoted = false;

    public function __construct(private FoodRepository $foodRepository)
    {
    }

    #[LiveAction]
    public function vote(#[LiveArg] string $direction)
    {
        if ('up' === $direction) {
            $this->food->upVote();
        } else {
            $this->food->downVote();
        }

        $this->foodRepository->add($this->food, true);
        $this->hasVoted = true;
    }
}

templates/components/FoodVote.html.twig

<tr {{ attributes }}>
    <th>{{ food.name }}</th>
    <td>
        Votes: {{ food.votes }}
    </td>
    <td style="width: 250px;">
        {% if hasVoted %}
            <div class="alert alert-success">
                Thanks for voting! <twig:ux:icon name="circle-check" />
            </div>
        {% else %}
            <button
                type="button"
                class="btn btn-secondary"
                data-action="live#action"
                data-live-action-param="vote"
                data-live-direction-param="up"
            >
                <twig:ux:icon name="arrow-up" />
            </button>
            <button
                type="button"
                class="btn btn-secondary"
                data-action="live#action"
                data-live-action-param="vote"
                data-live-direction-param="down"
            >
                <twig:ux:icon name="arrow-down" />
            </button>
        {% endif %}
    </td>
</tr>

作者 weaverryan

发布 2022-06-17