动态HTML页面内容

比方说，我希望每个用户改变搜索选项时间显示不同的项目。我通过AJAX获得新项目（这是强制性的，所以我不能使用POST，所以我不能使用django模板的{％for％}循环）。目前，我将返回的项目列表传递给一个生成HTML代码的JavaScript函数。这个函数不过是将字符串连接在一起并形成新的HTML内容。动态HTML页面内容

一个简单的例子：

function build_items_list(items_list, container){ 
    container.innerHTML = ''; 
    for(var i=0; i<items_list.length; i+=1){ 
     var item = items_list[i]; 
     container.innerHTML += '<div>' + 
           '<input type="checkbox" id="' + item.id.toString() + '">' + 
           '<a href="' + item.url+'"><b>' + item.name + '</b></a>'+ 
           '</div>' 

    } 
}

很显然，这是不产生内容的最好方式，我有许多相似的内容来产生。

什么是产生这些内容的正确方法？

非常感谢。

来源

2017-02-08 The Maestro

为什么选择python和django？ –

这是该项目。 Django，Python和AJAX不是可选的。 –

这是一个科学项目，很多很多图书馆都在python后端使用。 –

首先，就没有正确的方式。
你这样做的方式很好。这就是说，我不得不在JavaScript中多次创建内容，因此想出了一个生成内容的函数。它可以很容易地修改，我发现它保持代码，imo，更干净。

function createElement(element, attributes, text) { 
    // function to create an element with class and text if wanted. 
    // attributes is an object of key value items. Key is the attribute, value is the value. 
    // you could change the "class" to an argument and use it to set anyAttribute 
    var el = document.createElement(element); 
    $.each(attributes, function(key, value) { 
     el.setAttribute(key, value); 
    }); 
    if (text) { 
     var t = document.createTextNode(text); 
     el.appendChild(t); 
    } 
    return el; 
}

为例上面可以称为像这样：

createElement("div", { 
    "class": "btn btn-default btn-sm btn-gene col-md-4", 
    "value": value }, "remove item")

这产生了以下元件

<div class"btn btn-default btn-sm btn-gene col-md-4" value="value">remove item</div>

特殊照顾仍然将要建造的元件在JavaScript和追加他们到DOM，这是一个工作，但我发现它有助于DRY。

更重要的是，你可以用其他的方面，由于@Or段说，一个前端框架或者，你可以使用一个前端模板引擎。
框架通常包含模板引擎和数据绑定值，这样，当值的变化，他们改变，但你可以自己做的逻辑，只是使用模板引擎的框架之外。
根据您的需求有多种模板引擎 - https://garann.github.io/template-chooser/

来源

2017-02-08 14:02:49 Craicerjack

非常感谢。你的回答非常有用：D –

我很抱歉，但有没有简单的解决方案，这就是为什么像角，灰烬等库是如此成功，您可以JS变量绑定到模板。

像你这样为每个模板你可以写很多功能，但可以考虑使用届党库。在角代码的

实施例：

<div ng-repeat="item in items_list"> 
    <div> 
     <input type="checkbox" id="{{item.id}}"> 
     <a href="{{item.url}}"><b>{{item.name}}</b></a> 
    </div> 
</div>

来源

2017-02-08 13:55:46

动态HTML页面内容

回答

相关问题