Question

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

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

哪种是最佳做法？

表现不是主要焦点。代码可操作性和简单性是我的重点。我已经使用了jQuery。

Answer 1

避免使用“克隆”，并使用Mustache或Handlebars等客户端模板解决方案。加载你的模板（预装在变量中，通过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);

Answer 2

您可能想要使用模板引擎。我个人最喜欢的是icanhaz.js，但还有很多其他解决方案可供选择。

Answer 3

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

像knockoutjs

这样的数据绑定框架

//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"]));

Try it in jsFiddle

客户端模板，服务器端模板或原始克隆和编辑存根DOM元素客户端？

3 个答案: