Du bist nicht angemeldet.

Stilllegung des Forums
Das Forum wurde am 05.06.2023 nach über 20 Jahren stillgelegt (weitere Informationen und ein kleiner Rückblick).
Registrierungen, Anmeldungen und Postings sind nicht mehr möglich. Öffentliche Inhalte sind weiterhin zugänglich.
Das Team von spieleprogrammierer.de bedankt sich bei der Community für die vielen schönen Jahre.
Wenn du eine deutschsprachige Spieleentwickler-Community suchst, schau doch mal im Discord und auf ZFX vorbei!

Werbeanzeige

Garzec

Alter Hase

  • »Garzec« ist der Autor dieses Themas

Beiträge: 693

Wohnort: Gießen

  • Private Nachricht senden

1

16.12.2017, 20:07

Data Attribut mit Handlebars setzen

Hi,
Ich nutze NodeJs, Express und Handlebars. Am Client nehme ich noch Jquery dazu.

Ich lasse mir ein Grid von Zellen am Server zusammenbauen. Dieses Array schicke ich dann beim Laden der Seite an den Client. Dabei bekommt jede Zelle die Infos PositionX und PositionY. Das Data Attribut setze ich im Template, damit ich im Client Script die Position über das Attribut auslesen kann.

Das Attribut ist aber undefiniert ?(

Also erstmal baue ich das Template

Quellcode

1
2
3
4
5
6
7
8
9
10
11
{{#each map}}
<div class="row">
  {{#each this}}

  <!-- <p>{{this.x}}</p> gibt einen richtigen Wert aus -->
  <!-- <p>{{this.y}}</p> gibt einen richtigen Wert aus -->

  <div class="cell" data-xPos={{this.x}} data-yPos={{this.y}}></div>
  {{/each}}
</div>
{{/each}}


und am Client führe ich diesen Code aus

Quellcode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).ready(function() {
  var cells = $(".cell");
  
  $(cells).each(function(i, cell) {
    var currentCell = $(cell);
    var x = currentCell.data("xPos");
    var y = currentCell.data("yPos");
    
    currentCell.click(function() {
      console.log(x + " | " + y); // TEST
    });
    
  });
  
});


Dabei steht dann in der Console, nach dem Klick auf eine Zelle, folgendes:

Zitat

undefined | undefined


Das Attribut kann also nicht richtig ausgelesen werden. Der DOM sieht aber eigentlich in Ordnung aus.
»Garzec« hat folgendes Bild angehängt:
  • DOM.png

BlueCobold

Community-Fossil

Beiträge: 10 738

Beruf: Teamleiter Mobile Applikationen & Senior Software Engineer

  • Private Nachricht senden

2

16.12.2017, 20:08

Ist der Spaß Case-sensitiv?
Teamleiter von Rickety Racquet (ehemals das "Foren-Projekt") und von Marble Theory

Willkommen auf SPPRO, auch dir wird man zu Unity oder zur Unreal-Engine raten, ganz bestimmt.[/Sarkasmus]

Garzec

Alter Hase

  • »Garzec« ist der Autor dieses Themas

Beiträge: 693

Wohnort: Gießen

  • Private Nachricht senden

3

16.12.2017, 20:19

Hm du hast wohl die richtige Frage gestellt :D Es funktioniert..

David Scherfgen

Administrator

Beiträge: 10 382

Wohnort: Hildesheim

Beruf: Wissenschaftlicher Mitarbeiter

  • Private Nachricht senden

4

17.12.2017, 09:53

Müsstest du nicht auch Anführungszeichen um die Attributwerte machen, da wo du den HTML-Code generierst?

Garzec

Alter Hase

  • »Garzec« ist der Autor dieses Themas

Beiträge: 693

Wohnort: Gießen

  • Private Nachricht senden

5

17.12.2017, 11:24

Ne, das erkennt er anscheinend von selbst. Es muss nur alles klein geschrieben sein. Damit ich mit Zahlen weitermachen kann, müsste noch ein Number drum, also mal als Pseudocode

Quellcode

1
2
var x = currentCell.data("x");
var xNum = Number(x);


aber ansonsten klappt das gut. :)

Werbeanzeige