Obtenir des données twig pour un script JS - Symfony 5.3 - TWIG - JavaScript
Bonjour
J'essaie d'obtenir des données pour un script JS qui est un modal affichant des données contenues dans un objet Folder
J'ai créé un controller pour afficher l'objet Folder dans une vue twig
Dans ma vue twig je peux lister tous les éléments (entités) enfants de Folder dans ma vue twig sans problème :
bars, bars ,quxes
(boards, categories, elements)
L'objet Folder s'affiche sous la forme d'une carte avec des tabs pour les éléments enfants
bars, bars ,quxes
(boards, categories, elements)
Dans le Tab Boards j'ai une boucle for qui affiche les elements inclus
Si je choisi un des éléments j'ouvre un modal affichant le nom et la description
le question est ici :
Comment construire en Js :
une variable pour le nom du Board : barname
et une autre pour la description du Board : bardescription
pour quelle soient lues dans mon modal.
j'ai deja créé un service twig "menubar "pour accéder au données je men sert depuis le menu sidebar où j'affiche les Folders (foo)
Controller
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
| #[Route('/folder', name: 'folder_')]
class FooController extends AbstractController
{
#[Route('/{id}/show', name: 'show', methods: 'GET')]
public function show(Foo $foo): Response
{
return $this->render('foo/show.html.twig', [
'foo' => $foo,
]);
}
} |
To Display selected Folder with included elements :
Boards => Categories => Elements by Tabs
Twig Tab Boards
Code:
1
2
3
4
5
6
7
8
9
10
| <div class="tab-pane fade" id="pills-boards" role="tabpanel" aria-labelledby="pills-boards-tab">
<p>
{% for bar in foo.bars %}
<p><button type="button" class="alert_demo_2 btn btn-secondary" id=""> {{bar}} </button></p>
{% endfor %}
</p>
</div> |
Button Tab Boards call a Modal via javascript which must contain fields :
Name
and
Description
of the Board
Js
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| <script>
var barname = '{{ }}';
var bardescription = '{{ }}';
//== Class definition
var SweetAlert2Demo = function() {
//== Demo
var initDemos = function() {
//== Sweetalert Demo 2
$('.alert_demo_2').click(function(e) {
swal(barname, bardescription, {
buttons: {
confirm: {
className : 'btn btn-success'
}
}
});
});
return {
//== Init
init: function() {
initDemos();
}
};
}();
//== Class Initialization
jQuery(document).ready(function() {
SweetAlert2Demo.init();
});
</script> |
In red : twig compatibles variables needed to display the expected data representing :
name, description
Modal will display a list of Boards found in showed selected Folder
Entity Foo (Folder)
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
| <?php
declare(strict_types=1);
namespace App\Entity;
use App\Repository\FooRepository;
use Doctrine\Common\Collections\ArrayCollection;
use Doctrine\Common\Collections\Collection;
use Doctrine\ORM\Mapping as ORM;
use Symfony\Component\Validator\Constraints as Assert;
/**
* @ORM\Entity(repositoryClass=FooRepository::class)
*/
class Foo
{
/**
* @ORM\Id
* @ORM\GeneratedValue
* @ORM\Column(type="integer")
*/
private ?int $id = null;
/**
* @ORM\Column(type="string", length=255)
*/
#[Assert\NotBlank]
private string $name;
/**
* @ORM\Column(type="text", nullable=true)
*/
private $description;
/**
* @var Collection<int, Bar>
* @ORM\OneToMany(targetEntity=Bar::class, mappedBy="foo", orphanRemoval=true, cascade={"persist"})
*/
// #[Assert\Count(min: 1)]
#[Assert\Valid]
private Collection $bars;
public function __construct()
{
$this->bars = new ArrayCollection();
}
public function __toString()
{
return $this->name;
}
public function getId(): ?int
{
return $this->id;
}
public function getName(): ?string
{
return $this->name;
}
public function setName(string $name): self
{
$this->name = $name;
return $this;
}
public function getDescription(): ?string
{
return $this->description;
}
public function setDescription(?string $description): self
{
$this->description = $description;
return $this;
}
/**
* @return Collection<int, Bar>
*/
public function getBars(): Collection
{
return $this->bars;
}
public function addBar(Bar $bar): self
{
if (!$this->bars->contains($bar)) {
$this->bars->add($bar);
$bar->setFoo($this);
}
return $this;
}
public function removeBar(Bar $bar): self
{
if ($this->bars->removeElement($bar)) {
if ($bar->getFoo() === $this) {
$bar->setFoo(null);
}
}
return $this;
}
} |
Entity Bar (Board)
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
| <?php
declare(strict_types=1);
namespace App\Entity;
use App\Repository\BarRepository;
use Doctrine\Common\Collections\ArrayCollection;
use Doctrine\Common\Collections\Collection;
use Doctrine\ORM\Mapping as ORM;
use Symfony\Component\Validator\Constraints as Assert;
/**
* @ORM\Entity(repositoryClass=BarRepository::class)
*/
class Bar
{
/**
* @ORM\Id
* @ORM\GeneratedValue
* @ORM\Column(type="integer")
*/
private ?int $id = null;
/**
* @ORM\Column(type="string", length=255)
*/
#[Assert\NotBlank]
#[Assert\Length(min: 2)]
private string $name;
/**
* @ORM\Column(type="text", nullable=true)
*/
private $description;
/**
* @ORM\ManyToOne(targetEntity=Foo::class, inversedBy="bars")
* @ORM\JoinColumn(nullable=false, onDelete="CASCADE")
*/
private ?Foo $foo = null;
/**
* @var Collection<int, Baz>
* @ORM\OneToMany(targetEntity=Baz::class, mappedBy="bar", orphanRemoval=true, cascade={"persist"})
*/
// #[Assert\Count(min: 1)]
#[Assert\Valid]
private Collection $bazs;
public function __construct()
{
$this->bazs = new ArrayCollection();
}
public function __toString()
{
return $this->name;
}
public function getId(): ?int
{
return $this->id;
}
public function getName(): ?string
{
return $this->name;
}
public function setName(string $name): self
{
$this->name = $name;
return $this;
}
public function getFoo(): ?Foo
{
return $this->foo;
}
public function setFoo(?Foo $foo): self
{
$this->foo = $foo;
return $this;
}
public function getDescription(): ?string
{
return $this->description;
}
public function setDescription(?string $description): self
{
$this->description = $description;
return $this;
}
/**
* @return Collection<int, Baz>
*/
public function getBazs(): Collection
{
return $this->bazs;
}
public function addBaz(Baz $baz): self
{
if (!$this->bazs->contains($baz)) {
$this->bazs->add($baz);
$baz->setBar($this);
}
return $this;
}
public function removeBaz(Baz $baz): self
{
if ($this->bazs->removeElement($baz)) {
// set the owning side to null (unless already changed)
if ($baz->getBar() === $this) {
$baz->setBar(null);
}
}
return $this;
}
} |
DUMP
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| array:3 [▼
"foo" => App\Entity\Foo {#382 ▼
-id: 96
-name: "Design"
-description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostru ▶"
-bars: Doctrine\ORM\PersistentCollection {#385 ▼
-snapshot: []
-owner: App\Entity\Foo {#382}
-association: array:15 [ …15]
-em: Doctrine\ORM\EntityManager {#246 …11}
-backRefFieldName: "foo"
-typeClass: Doctrine\ORM\Mapping\ClassMetadata {#360 …}
-isDirty: false
#collection: Doctrine\Common\Collections\ArrayCollection {#386 ▼
-elements: []
}
#initialized: false
}
}
"app" => Symfony\Bridge\Twig\AppVariable {#354 ▶}
"menubar" => App\Twig\BarsExtension {#342 ▶} |
Merci de votre aide
