Question

我正在制作Web应用程序，其中很多内容都是从JS中的json生成的。我不知道它是如何正确完成的，所以我只是生成复杂的html片段，就像字符串一样。它似乎是最好的方式，因为它松散了很多普通html的好东西：语法高亮，制表，以及每一行后面的符号：

    $('#chatlist').append(
        "<div class='chatlist_cell'>" +
            "<div class='chatlist_cell_inner'>" +
                "<div style='float: left;'>" +
                    "<img class='chatlist_avatar' src='/images/ui/user_placeholder.svg'>" +
                "</div>" +
                "<div style='float: left; padding-left: 10px;'>" +
                    "<div class='chatlist_title'>" + title + "</div>" +
                    "<div class='chatlist_text'>" + fromUserString + message.text + "</div>" +
                "</div>" +
            "</div>" +
        "</div>"
    )

今天我尝试使用jQuery，但情况更糟。理解起来要复杂得多。

    $('#chatlist').append(
        $('<div />').addClass('chatlist_cell').append(
            $('<div />').addClass('chatlist_cell_inner').append(
                $('<div />').css('float', 'left').append(
                    $('<img />').addClass('chatlist_avatar').attr('src','/images/ui/user_placeholder.svg')
                )
            ).append(
                $('<div />').css({'float': 'left', 'padding-left': '10px'}).append(
                    $('<div />').addClass('chatlist_title').text(title),
                    $('<div />').addClass('chatlist_text').text(message.text)
                )
            )
        )
    )

JS / jQuery有更好的方法吗？如果没有，还有其他工具吗？

Answer 1

如果您不愿意/能够使用完整的JS框架（没有问题），您可能需要查看下划线/ lodash templates这是非常轻量级的，并且可以避免编写代码来修改进入每一个可能的状态。您只需概述数据应如何呈现，然后在数据更改时重新呈现数据。请注意，这不应该用于＆＃34; web app＆＃34;类型的应用程序，因为JS框架更适合这项工作（React / Flow，Angular，Backbone，Ember等），但是为小型或很少更改的界面生成HTML，lodash非常好。

示例：

从你的代码：

<script id="myTemplate" type="text/template"> 
    <div class='chatlist_cell'>
        <div class='chatlist_cell_inner'>
            <div style='float: left;'>
                <img class='chatlist_avatar' src='/images/ui/user_placeholder.svg'>
            </div>
            <div style='float: left; padding-left: 10px;'>
                <div class='chatlist_title'><%=title%></div>
                <div class='chatlist_text'><%=fromUserString%> <%=message.text%></div>
            </div>
        </div>
    </div>
</script>
<script>
    $(function() {
        var myTemplate = _.template($('#myTemplate').html());
        function addNewMessage(title, message, fromUserString) {
            var html = myTemplate({
                title: title,
                message: message,
                fromUserString: fromUserString
            });
            $('#chatlist').append(html);
        }
        addNewMessage("myTitle", {text: "myText"}, "JoshStrange:");
    });

</script>

JSFiddle

在jQuery / JS中生成复杂html层次结构的最佳方法

1 个答案: