的Javascript - 创建表车把

Question

我有一个index.html，我有表格，那我用JavaScript填充：

<div class="table-responsive table-hover"> 
    <table class="table" id="table"> 
    </table> 
</div> 

我创建车把模板文件：

<tr> 
    <td>{{ avatar }}</td> 
    <td>{{ name }}</td> 
    <td>{{ homepage }}</td> 
    <td>{{ score }}</td> 
</tr> 

在我的脚本中，我导入模板并尝试发送数据，这是我从api端点获得的对象数组，我首先在array对象上执行forEach循环，然后调用createHtml函数：

var tableTemplate = require('../../templates/table.handlebars'); 

var createHtml = function(data) { 
    console.log(data); 
    var table = document.querySelector('#table'); 
    table.innerHTML = tableTemplate({ 
     avatar: data.owner.avatar_url, 
     name: data.full_name, 
     homepage: data.homepage, 
     score: data.score 
    }); 
} 

array.forEach(createHtml); 

但是，即使我得到登录的功能createHtml只有正在创建表的第一行内的所有主机从阵列的对象，这是为什么，我该如何解决？

更新

我已经试过这样的事情，但我得到表未定义：

var tableTemplate = require('../../templates/table.handlebars'); 

var createHtml = function(data) { 
    console.log(data); 

    table += tableTemplate({ 
     avatar_url: data.owner.avatar_url, 
     full_name: data.full_name, 
     homepage: data.homepage, 
    score: data.score 
    }); 
} 

export function createTable(repositories, page) { 
    var itemsPerPage = 20, 
     offset = page*20; 

    table = document.querySelector('#table'); 
    table.innerHTML = ''; 

    repositories.slice(offset, offset+itemsPerPage).forEach(createHtml); 
} 

Answer 1

您正在更换使用的innerHTML每次迭代的HTML，从以前的迭代失去HTML。连接所有字符串并在forEach之外设置一次innerHTML。更好的选择（仅使用局部变量）是使用Array#map和Array#join。

var tableTemplate = require('../../templates/table.handlebars'); 

document.querySelector('#table').innerHTML = array.map(function(data) { 
    return tableTemplate({ 
     avatar: data.owner.avatar_url, 
     name: data.full_name, 
     homepage: data.homepage, 
     score: data.score 
    }); 
}).join('');