Javascript 客户端模板、服务器端模板或原始克隆&；在客户端编辑存根DOM元素？

有一个页面显示对象列表（如书籍）。 此列表可以通过客户端交互以编程方式增加。 在DOM中创建新“书籍”的好方法是什么

我想在DOM中创建一个不可见的对象存根，然后将其克隆n次，每次都编辑适当的内容（例如，像书的标题和拇指）

哪一个是最佳实践

性能不是主要关注点。代码的可操作性和简单性是我关注的焦点。 我已经在使用jQuery了。

避免使用“克隆”，并使用类似或的客户端模板解决方案。加载模板（通过AJAX预加载到变量中，无论什么），缓存它们（在对象、数组、变量中，无论什么），以便重用，然后通过jQuery构建它们：

//the data
var data = {
    text : 'foo'
}

//HTML template string
var templateString = '<div><span>{{text}}</span></div>';

//render contents to template
var templateWithData = Mustache.render(templateString,data);

//build using jQuery
//should now be a div that has a span that contains foo
var newElement = $(templateWithData); 

//数据
风险值数据={
文本：“foo”
}
//HTML模板字符串
var templateString='{{text}}'；
//将内容呈现到模板
var templateWithData=Mustache.render（templateString，data）；
//使用jQuery构建
//现在应该是一个具有包含foo的范围的div
var newElement=$（templateWithData）；

您可能需要使用模板引擎。我个人最喜欢的是，但是还有很多其他的解决方案

您最好使用数据绑定框架/引擎，而不是模板引擎

数据绑定框架，如

//视图（模板）
新项目：
添加
您的物品：

//ViewModel-这是我的数据模型
var SimpleListModel=函数（项）{
this.items=ko.observearray（项目）；
this.itemToAdd=ko.可观察（“”）；
this.addItem=函数（）{
if（this.itemToAdd（）！=“”）{
this.items.push（this.itemToAdd（））；//添加项。写入“items”ObservalArray会导致任何关联的UI更新。
this.itemToAdd（“”；//清除文本框，因为它绑定到“itemToAdd”可观察对象
}
}.bind（this）；//确保“this”始终是此视图模型
};
ko.applyBindings（新的SimpleListModel（[“α”，“β”，“γ]））；

---

对于这种基本的积垢材料，有很多项目。对您和用户来说最简单？显示表格，允许用户添加行。以前在jQuery中已经做过无数次了。@Konerak我环顾了四周，但还没有找到明确的最佳实践，因此我在这里询问，以了解处理此问题的常用方法以及最新的解决方案。对不起，如果看起来很琐碎。

//View (Template)
<form data-bind="submit: addItem">
New item:
<input data-bind='value: itemToAdd, valueUpdate: "afterkeydown"' />
  <button type="submit" data-bind="enable: itemToAdd().length > 0">Add</button>
  <p>Your items:</p>
  <select multiple="multiple" width="50" data-bind="options: items"> </select>
</form>

// ViewModel - Here's my data model
var SimpleListModel = function(items) {
    this.items = ko.observableArray(items);
    this.itemToAdd = ko.observable("");
    this.addItem = function() {
        if (this.itemToAdd() != "") {
            this.items.push(this.itemToAdd()); // Adds the item. Writing to the "items" observableArray causes any associated UI to update.
            this.itemToAdd(""); // Clears the text box, because it's bound to the "itemToAdd" observable
        }
    }.bind(this);  // Ensure that "this" is always this view model
};

ko.applyBindings(new SimpleListModel(["Alpha", "Beta", "Gamma"]));