html 中的自动列表，小胡子 JavaScript

Question

我正在尝试渲染一个带有小胡子的简单无序列表。

这是我的代码：

var num = 0;

document.addEventListener("DOMContentLoaded", function(event) {
    var template = '<ul><li>{{name}}</li></ul>'; 
    var data = {name: 'nome' + num}

    while (num < 6) 
    {
        num++;                      
        data = {name: 'nome' + num};            

    }

输出是：

nome6

但我正在尝试使用条件自动创建：

nome1

nome2

nome3

nome4

nome5

nome6

Answer 1

你的数据不是数组，如果你想在循环中打印一些东西你需要在你的js中创建一个数组并将它传递给模板。

查看：

{
    "beatles": [
        { "firstName": "John", "lastName": "Lennon" },
        { "firstName": "Paul", "lastName": "McCartney" },
        { "firstName": "George", "lastName": "Harrison" },
        { "firstName": "Ringo", "lastName": "Starr" }
    ],
    "name": function () {
        return this.firstName + " " + this.lastName;
    }
}

模板：

<ul>
    {{#beatles}}
        <li>{{name}}</li>
    {{/beatles}}
</ul>

html 中的自动列表，小胡子 JavaScript

Automatic List in html with Mustache JavaScript

html

javascript

mustache