Question

所以我正在建立一个歌曲队列，在一个函数调用中自动更新它的内容。此函数调用为php脚本创建一个ajax请求，该脚本返回队列中歌曲的json数据（图像URL，歌曲标题，歌曲作者）。然后我想根据json数据中返回的每首歌曲动态填充我的ul。

当前结构是包含li的ul，其中包含所有其他html。

像这样：

<ul>
    <li>
        <div id="thumbnail" style="background: url('URL HERE'); background-size: 100% 100%"></div>
        <div id="songdetails">
            <div id="title">TITLE HERE</div>
            <div id="author">AUTHOR HERE</div>
        </div>
    </li>

    <li>
        <div id="thumbnail" style="background: url('URL HERE'); background-size: 100% 100%"></div>
        <div id="songdetails">
            <div id="title">TITLE HERE</div>
            <div id="author">AUTHOR HERE</div>
        </div>
    </li>

    <li>
        <div id="thumbnail" style="background: url('URL HERE'); background-size: 100% 100%"></div>
        <div id="songdetails">
            <div id="title">TITLE HERE</div>
            <div id="author">AUTHOR HERE</div>
        </div>
    </li>
</ul>

我的问题是，我在stackoverflow和其他网站上发现了大多数人建议的内容：

var ul = document.getElementById('ul');

ul.appendChild(child);

我的问题是，我正在尝试最小化我用来使代码简化和可读的代码量，并且不希望每个孩子及其子女都有变量。

有没有更有效的方法来实现这一目标？

Answer 1

jQuery解决方案：

<ul id="container" />

和Javascript：

// Assuming the data comes in like this:
/*
[
    {url: 'http://www.example/com', title: 'Title Goes Here', author: 'Author here'},
    {url: ...
]
*/
$.getJSON('url.php', function(data) {
    $('#container').empty().append(data.map(function(x) {
        return '
            <li>
                <div id="thumbnail" style="background: url(\'' + x.url + '\'); background-size: 100% 100%"></div>
                <div id="songdetails">
                    <div id="title">' + x.title + '</div>
                    <div id="author">' + x.author + '</div>
                </div>
           </li>
        ');
    });
});

Answer 2

我倾向于用模板来做这件事。我创建了一个简单的模板引擎，可以像这样进行基本的字符串替换

    function renderTemplate(str, obj) {
        var i, r, val, outStr=str;

        for(i in obj) {
            if (obj.hasOwnProperty(i)) {
                r = new RegExp("{" + i + "}", "g");
                val = obj[i] || "&nbsp;";
                val = val.toString().replace(/^null$/, "&nbsp;");
                outStr = outStr.replace(r, val);
            }
        }

        return outStr;
    }

然后我会像这样创建一个模板字符串

var template = "Hello <span class=\"name\">{name}</span> you are {age} years old";

给定一个包含名称和年龄的对象，您可以将模板渲染为html，如此

var html=renderTemplate(template, {name: "Alice", age: 38});

在用大括号包裹的模板中搜索在第二个参数中传入的对象中的键（＆＃34; {＆＃34;和＆＃34;}＆＃34;）

最后，我创建一个新元素并将此字符串设置为innerHTML并将其附加到我的文档

var newLI = document.createElement("li");
newLI.innerHTML = html;
ulNode.appendChild(newLI);

这个renderTemplate是我的早期创建，我在代码中埋藏了更多容错的新版本，但这是一个很好的例子。

注意：野外还有其他模板解决方案。这是我的家乡。正如你对OP的评论所说，Mustache就是其中之一。

使用动态html填充元素

2 个答案: