使用Underscore与JavaScript获取NBA球队数据，表格显示变量占位符问题求助

嘿，这个问题我之前也碰到过！核心原因是你混用了Underscore模板的语法和ES6的模板字符串语法——Underscore并不认识${}这种写法，所以才会把它原样输出成文本，而不是解析成球队名称。下面给你针对性的解决思路：

方法一：改用Underscore模板的标准语法 #

Underscore模板默认使用<%= 变量名 %>来输出变量值，你需要把模板里的${element.NAME}替换成Underscore的语法格式，具体步骤如下：

1. 修改HTML模板部分 #

假设你之前的模板写在HTML的<script>标签里，把变量输出的地方改成Underscore的语法：

<!-- 定义Underscore专用模板，type设为text/template避免浏览器解析 -->
<script type="text/template" id="team-row-template">
  <% _.each(teams, function(element) { %>
    <tr>
      <!-- 用<%= %>替代${}来输出变量 -->
      <td><%= element.NAME %></td>
    </tr>
  <% }); %>
</script>

<!-- 你的表格容器 -->
<table id="nba-teams-table">
  <thead>
    <tr><th>球队名称</th></tr>
  </thead>
  <tbody id="teams-table-body"></tbody>
</table>

2. 调整ListTeams.js中的渲染逻辑 #

用Underscore的_.template()方法编译模板，再传入球队数据渲染到表格：

// 假设你已经从数据库获取到30支球队的数组teamsData
const teamsData = [
  {NAME: "洛杉矶湖人"},
  {NAME: "波士顿凯尔特人"},
  // ... 其他28支球队数据
];

// 编译模板
const teamTemplate = _.template(document.getElementById('team-row-template').innerHTML);

// 把渲染后的内容插入表格tbody
const tableBody = document.getElementById('teams-table-body');
tableBody.innerHTML = teamTemplate({ teams: teamsData });

方法二：纯原生ES6写法（无需Underscore） #

如果你不想用Underscore的模板语法，也可以直接用ES6的反引号``包裹模板字符串，确保变量被解析：

// 假设teamsData是你的球队数组
const tableRows = teamsData.map(element => `
  <tr><td>${element.NAME}</td></tr>
`).join('');

document.getElementById('teams-table-body').innerHTML = tableRows;

不过这种写法就没必要再引入Underscore了，适合纯原生JS的场景。

额外注意点 #

• 确认你的球队数据对象里的属性名确实是NAME（大小写敏感），如果是小写name，记得同步修改模板里的变量名；
• 如果是通过AJAX从数据库获取数据，要确保数据成功返回后再执行渲染逻辑，避免因数据未加载完成导致渲染空内容。

内容的提问来源于stack exchange，提问作者D.Doherty