的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('');