ハンドルバーのデータ属性を設定すると、私はExpressとハンドルバーとのNodeJsを使用

Question

オブジェクト。

私は、サーバー上のグリッドを作成し、クライアントにオブジェクトを送信します。このリストには、x位置とy位置の2つのプロパティを持つセルが含まれています。

だから私は、このコードのセルに未定義

コンソールログをクリック

$(document).ready(function() { 
 
    var cells = $(".cell"); // get all cells 
 
    
 
    $(cells).each(function(i, cell) { 
 
    var currentCell = $(cell); 
 
    var x = currentCell.data("xPos"); // get the xPos 
 
    var y = currentCell.data("yPos"); // get the yPos 
 
    
 
    currentCell.click(function() { // add a click event to each cell 
 
     console.log(x + " | " + y); 
 
    }); 
 
    
 
    }); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
{{#each map}} 
 
<div class="row"> 
 
    {{#each this}} 
 

 
    <!-- <p>{{this.x}}</p> prints out a correct value! --> 
 
    <!-- <p>{{this.y}}</p> prints out a correct value! --> 
 

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

のために行きます|私は、データの属性を設定することができますどのように未定義

？私はちょうど私がデータ属性に行ったので、クライアントスクリプトに情報を渡したいです。

例DOM

Answer 1

ページを構築した後、データ属性が

データXPOS = {{this.x}}データYPOSの= {{これでなければなりません.Y}}

だから、完全なHTMLは次のようになり

<div class="cell" data-xpos={{this.x}} data-ypos={{this.y}}></div> 

およびJS

var x = currentCell.data("xpos"); 
var y = currentCell.data("ypos");