使用 ajax 和 jQuery Append() 将一些项目放入一个运行良好的 div 中。我的问题是我可以为 div 设置某种模板，而不必将所有 html 代码放在 Append() 行中吗？
问问题
4262 次
4 回答
3
我不确定这是否是您的意思，但是您可以在创建新元素时传递一个属性对象。例如：
var divProperties = {id: 'myID', 'class': 'myClass', text: 'Some text'};
$('<div/>', divProperties).appendTo('body');
这将输出：
<div id="myDiv" class="myClass">Some text</div>
于 2012-10-14T21:00:15.587 回答
2
看看 jQuery 模板。似乎它可以满足您的需求。
http://api.jquery.com/template-tag-each/
请参阅该页面中的示例。我认为你正在寻找的是这样的
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js">
</script>
</head>
<body>
<script id="movieTemplate" type="text/x-jquery-tmpl">
<li>
Title: ${Name}.
{{each Languages}}
${$index + 1}: <em>${$value}. </em>
{{/each}}
</li>
</script>
<ul id="movieList"></ul>
<script>
var movies = [
{ Name: "Meet Joe Black", Languages: ["French"] },
{ Name: "The Mighty", Languages: [] },
{ Name: "City Hunter", Languages: ["Mandarin", "Cantonese"] }
];
/* Render the template with the movies data */
$( "#movieTemplate" ).tmpl( movies )
.appendTo( "#movieList" );
</script>
</body>
</html>
于 2012-10-14T20:50:39.637 回答
0
您正在寻找的是微模板。在Backbone.js的TODO 应用示例中可以找到一个很好的示例。
基本上，模板在 HTML 代码中：
<script type="text/template" id="item-template">
<div class="view">
<input class="toggle" type="checkbox" <%= done ? 'checked="checked"' : '' %> />
<label><%- title %></label>
<a class="destroy"></a>
</div>
<input class="edit" type="text" value="<%= title %>" />
并且在 JavaScript 中非常容易使用：
template: _.template($('#item-template').html()),
render: function() {
this.$el.html(this.template(this.model.toJSON()));
this.$el.toggleClass('done', this.model.get('done'));
this.input = this.$('.edit');
return this;
},
当然还有很多其他的模板引擎。
于 2012-10-14T20:39:42.977 回答
0
有很多 jQuery 和 JavaScript 模板库，我的首选是Handlebars.js。
除了酷的名字，它还是一个非常高效、快速、易于使用和适应性强的库。
演示：http: //jsfiddle.net/SO_AMK/BP93x/
JavaScript：
var tmpl = Handlebars.compile(document.getElementById('tmpl').innerHTML);
document.getElementById('content').innerHTML = tmpl({
name: 'Jake'
});
HTML：
<script id="tmpl" type="text/x-handlebars-template">
<h1>Hello, {{ name }}.</h1>
<h2>Handlebars loves you.</h2>
</script>
<div class="container">
<div id="content">
</div>
</div>
Handlebars 还可以从外部文件加载模板，支持循环和 if/else 语句。
于 2012-10-14T20:59:17.967 回答