设置Handlebars对象的数据属性

Question

我将NodeJs用于Express和Handlebars。

我在服务器上创建一个网格并将对象发送到客户端。该列表包含具有两个属性x x position和y positon的单元格。

所以我去找这个代码

＆＃13;

＆＃13;

$(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);
    });
    
  });
  
});

＆＃13;

<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}}

＆＃13;

＆＃13;

＆＃13;

单击控制台时记录的单元格

  

undefined |未定义

如何设置数据属性？我只是想将信息传递给客户端脚本，所以我去了数据属性。

构建页面后的示例DOM

Answer 1

数据属性必须是

  

data-xpos = {{this.x}} data-ypos = {{this.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");