README

此 Bundle 提供了 Twig 和 Symfony 表单辅助函数，用于 Stimulus.js。

概述

1. 功能
2. 安装
3. Twig 辅助函数
4. 表单辅助函数

功能

• Twig 辅助函数
• Symfony 表单辅助函数

安装

步骤 1: 下载 Bundle

打开命令行，进入您的项目目录，然后执行以下命令以下载此 Bundle

$ composer require hello-sebastian/hello-stimulus-bundle

步骤 2: 启用 Bundle（不使用 flex）

然后，通过将其添加到项目 config/bundles.php 文件中注册的 Bundle 列表中来启用此 Bundle

// config/bundles.php

return [
    // ...
    HelloSebastian\HelloStimulusBundle\HelloStimulusBundle::class => ['all' => true],
];

Twig 辅助函数

hello_stimulus_controller(controllerName, values = [])

渲染控制器属性值。可选的 values。

参数

controllerName: 控制器名称

values: Stimulus 值数组（可选）

示例

<div {{ hello_stimulus_controller('hello') }}></div>

<div {{ hello_stimulus_controller('hello', [
	{name: 'myValue', value: 'Hey!'},
	{name: 'myNumber', value: 1234}
]) }}></div>

渲染为

<div data-controller="hello"></div>

<div data-controller="hello" data-hello-my-value-value="Hey!" data-hello-my-number-value="1234"></<div>

您可以使用两种方式指定控制器

假设控制器位于 assets/controllers/user/user_form_controller.js

• "HTML" stimulus 类型

  <div {{ hello_stimulus_controller('user--user-form') }}></div>
  {# rendered to data-controller="user--user-form" #}

• "JavaScript" 类型

  <div {{ hello_stimulus_controller('user/user_form') }}></div>
  {# rendered to data-controller="user--user-form" #}

两种变体都会得到相同的结果。

hello_stimulus_target(controllerName, target)

渲染目标属性值。

参数

controllerName: 此目标的控制器名称

target: 目标属性名称

示例

<h1 {{ hello_stimulus_target('hello', 'greeting') }}></h1>

渲染为

<div data-hello-target="greeting"></div>

hello_stimulus_action(controllerName, event, method)

渲染动作数据属性。

参数

controllerName: 此动作的控制器名称

event: 要监听的 DOM 事件

method: 控制器类内部的 JavaScript 方法名称

示例

<button type="button" {{ hello_stimulus_action('hello', 'click', 'handleBtnClick') }}>
    Hey!
</button>

渲染为

<button type="button" data-action="click->hello#handleBtnClick">
    Hey!
</button>

hello_stimulus_value(controllerName, name, value)

渲染值数据属性。

参数

controllerName: 此值的控制器名称

name: 此值的名称

value: 此值的值

示例

<div {{ hello_stimulus_value('hello', 'username', 'hello_sebastian') }}></div>

渲染为

<div data-hello-username-value="hello_sebastian"></div>

表单辅助函数

在 Symfony 表单中，直接将 Stimulus 属性传递给类型非常有用。为此，此 Bundle 提供了一个具有两个方法（target() 和 value()）的辅助类。

StimulusFormHelper 的完整示例

StimulusFormHelper API

__construct(controllerName, defaultEvent = "click")

参数

controllerName: JavaScript 控制器类的名称（和位置）

defaultEvent:（可选）：要监听的默认 DOM 事件（默认为“点击”事件）

用法

您可以使用两种方式指定控制器

假设控制器位于 assets/controllers/user/user_form_controller.js

• "HTML" stimulus 类型

  $this->formController = new StimulusFormHelper('user--user-form');
  // rendered to data-controller="user--user-form" to the form tag

• "JavaScript" 类型

  $this->formController = new StimulusFormHelper('user/user_form');
  // rendered to data-controller="user--user-form" to the form tag

两种变体都会得到相同的结果。

target(target)

参数

target: Stimulus 控制器内部的目标属性名称

返回

array("data-[controllerName]-target" => "[target]");

用法

->add('firstName', TextType::class, array(
    'label' => 'First name',
    'attr' => $this->formController->target('firstNameInput')
))

action(method, event = null)

参数

method: Stimulus 控制器内部的 JavaScript 方法名称

event:（可选）要监听的 DOM 事件（如果为 null，则采用构造函数中的默认事件）

返回

array("data-action" => "[event]->[controllerName]#[method]");

用法

->add('isActive', CheckboxType::class, array(
    'label' => 'is Active',
    'required' => false,
    'attr' => $this->formController->action("handleIsActive", "change")
))

示例

//src/Form

namespace App\Form;

use App\Entity\User;
use HelloSebastian\HelloStimulusBundle\Form\StimulusFormHelper; // <-- don't forget this use statement
use Symfony\Bridge\Doctrine\Form\Type\EntityType;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\CheckboxType;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\Form\FormInterface;
use Symfony\Component\Form\FormView;
use Symfony\Component\OptionsResolver\OptionsResolver;

class UserType extends AbstractType
{
    private $userFormController;

    public function __construct()
    {
        $this->formController = new StimulusFormHelper('user-form');
    }

    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('firstName', TextType::class, array(
                'label' => 'First name',
              	'attr' => $this->formController->target('firstNameInput')
            ))
            ->add('lastName', TextareaType::class, array(
                'label' => 'Last name',
              	'label_attr' => $this->formController->target('lastNameLabel')
              	'attr' => $this->formController->target('lastNameInput')
            ))
            ->add('email', TextareaType::class, array(
                'label' => 'Email'
            ))
          	->add('isActive', CheckboxType::class, array(
                'label' => 'is Active',
                'required' => false,
              
                // if you want to use both inside the same attr, you can use array_merge()
                'attr' => array_merge(
                    $this->formController->action("handleIsActive", "change"),
                    $this->formController->target("isActiveCheckbox"),
                  	array('class' => 'my-checkbox-class')
                )
            ))
        ;
    }
  
    public function buildView(FormView $view, FormInterface $form, array $options)
    {
        $this->formController->setControllerNameToFormView($view);
    }      

    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults(array(
            'data_class' => User::class,
        ));
    }
}

action 和 traget 返回一个数组。如果您想在同一 attr 中使用它们，可以使用 array_merge()。