0

使用 ajax 和 jQuery Append() 将一些项目放入一个运行良好的 div 中。我的问题是我可以为 div 设置某种模板，而不必将所有 html 代码放在 Append() 行中吗？

4

4 回答 4

3

我不确定这是否是您的意思，但是您可以在创建新元素时传递一个属性对象。例如：

var divProperties = {id: 'myID', 'class': 'myClass', text: 'Some text'};
$('<div/>', divProperties).appendTo('body');

这将输出：

<div id="myDiv" class="myClass">Some text</div>

jQuery API - 创建新元素

于 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 回答