Question

我在前端（div）有一个部分（html），它根据后端的实体没有动态加载。因此，如果后端有5个实体，div将重复5次。但所有这一切都发生在从javascript做的重复。所以当前的代码如下：

var template = '<div>';
template += '<div class="row">';
template += '<div class="col-md-3">';
template += '<div class="col-md-3"></div>';

等等。所以我们基于后端中没有实体来重复这个模板变量。我知道这是一个糟糕的方法。我们试图通过javascript渲染的template变得极其庞大且难以理解。它很难做出任何改变，我试图让它变得移动/桌面响应，它让我做噩梦。

我刚开始进行前端开发，对此我可以采取的方法了解不多。我肯定知道使用像angularjs或emberjs这样的前端框架可以很容易地解决这些问题，但我没时按时学习这些框架。

使用我可以使用的html / css / js / jquery / ajax的最佳方法是什么？

编辑1：后端是Python / Django / Django-Rest

Answer 1

如果您可以使用ES6（没有其他依赖项），模板文字是您快速而肮脏的选择。

function html(literalSections, ...substs) {
    // Use raw literal sections: we don’t want
    // backslashes (\n etc.) to be interpreted
    let raw = literalSections.raw;

    let result = '';

    substs.forEach((subst, i) => {
        // Retrieve the literal section preceding
        // the current substitution
        let lit = raw[i];

        // In the example, map() returns an array:
        // If substitution is an array (and not a string),
        // we turn it into a string
        if (Array.isArray(subst)) {
            subst = subst.join('');
        }

        // If the substitution is preceded by a dollar sign,
        // we escape special characters in it
        if (lit.endsWith('$')) {
            subst = htmlEscape(subst);
            lit = lit.slice(0, -1);
        }
        result += lit;
        result += subst;
    });
    // Take care of last literal section
    // (Never fails, because an empty template string
    // produces one literal section, an empty string)
    result += raw[raw.length-1]; // (A)

    return result;
}

要创建模板，

  const tmpl = addrs => html`
    <table>
    ${addrs.map(addr => html`
        <tr>$${addr.first}</tr>
        <tr>$${addr.last}</tr>
    `)}
    </table>
  `;

您可以在

中详细了解此背后的流程

http://www.2ality.com/2015/01/template-strings-html.html

动态复制html的部分

1 个答案: