✔ Template mit Daten füttern

S

Saheeda

Mitglied
Hallo,

ich beschäftige mich noch nicht allzu lange mit Javascript und bräuchte einen kleinen Tipp.

Meine Hauptseite besteht momentan nur aus einem Canvas-Element. Im Hintergrund läuft ein Script, welches mithilfe von EaselJS auf diesem Canvas malt. Ich habe z.B. eine Reihe von farbigen Flächen, die mit unterschiedlichen Informationen gefüllt werden sollen. Im Backend existiert dazu eine Datenbank und verschiedene Entities.


Grob gesagt sieht mein Code ungefähr so aus:

Code: 
public function indexAction(){
[...]
$entities = $em->getAll();

return $this->render('Bundle:Home:index.html.twig', array('entities' => $entities));
}

Code: 
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="easeljs-0.8.0.min.js"></script> 
        <script type="text/javascript" src="network.js"></script>
    </head>
    <body onload = "init();">
        <canvas id="myCanvas" width="1000" height="1000"></canvas>       
    </body>
</html>


Joah, und ich habe jetzt keine Ahnung, wie ich die entities an das Script weitergebe.. Vielleicht bin ich auch komplett auf dem Holzweg und muss gar nicht über die index.html.twig gehen, sondern mir die Infos aus dem Script heraus holen.
Ich bin jedenfalls planlos.

Ist meine Idee eines JS-Templates so exotisch und obskur?
 
Zuletzt bearbeitet von einem Moderator:
Ja, ich weiß, dass Pushen verboten ist, darum bitte in den Beitrag reineditieren (ich kanns leider nicht mehr oder bin zu doof den Button zu finden...), wenn der Nächste so ein Problem hat:

Ich habe inzwischen eine Lösung für mein Problem gefunden:
Ich wandle das Entity-Array in einen JSON-String um, übergebe ihn und parse ihn dann wieder zu einem Objekt.
Wie es mit twig funktioniert, weiß ich nicht, meine index-Datei wird jetzt als php gerendert.
(Unter app/config/config.yml ändern: templating: engines: ['twig', 'php'])

Die Übergabe des Entity-Arrays erfolgt wie oben über den Controller.

index.html.php
Code: 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">   
        <script src="<?php echo $view['assets']->getUrl('bundles/acmedemo/js/test.js')?>" type="text/javascript"></script>
        <script type="text/javascript" src="<?php echo $view['assets']->getUrl('bundles/acmedemo/js/easeljs-0.8.0.min.js') ?>"></script> 
        <title></title>
         <style>
            #techWeb{
                background-color: thistle;
            }

        </style>
    </head>
    <body>     
        <canvas id="techWeb" width="2000" height="2000"></canvas>       
        <script type="text/javascript" language="javascript">
       var jsonString= '<?php echo json_encode($entity) ?>';     
        init(jsonString);
        </script>
      
      
    </body>
</html>

test.js
Javascript: 
function init(jsonString) {
    entities = JSON.parse(jsonString);
    stage = new createjs.Stage("techWeb");

    for (var i = 0; i < entities.length; i++) {
        var circle = new createjs.Shape();
        circle.graphics.setStrokeStyle(4).beginFill("deepskyblue").drawCircle(0, 0, 70);
        circle.x = (i+1)*100;
        circle.y = (i+1)*100;

        stage.addChild(circle);
    }
    stage.update();
}

Ausgabe: Canvas mit zwei versetzten Kreisen.

Thema kann als erledigt markiert werden.
 
Eine Lösung zu zeigen werten wir (zumindest ich) auch nicht als Pushen :)
Erledigt-Markierung ist gesetzt
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück