0

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

我想在 DOM 中创建一个不可见的对象存根，然后克隆它 n 次，每次编辑属性（例如书名和拇指）。

哪个是最佳实践？

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

4

3 回答 3

2

避免“克隆”并使用像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);
于 2012-05-16T09:42:10.080 回答
0

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

于 2012-05-16T09:42:19.740 回答
0

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

数据绑定框架，如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"]));

在 jsFiddle 中尝试

于 2014-08-26T23:49:11.350 回答