Question

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

Answer 1

看看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>

Answer 2

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

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

哪个会输出：

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

jQuery API - Creating New Elements

Answer 3

您正在寻找的是micro-templating。可以在Backbone.js的TODO app示例中找到一个很好的示例。

基本上，模板在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;
},

当然还有许多其他模板引擎。

Answer 4

有许多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语句。

使用jQuery追加和/或模板？

4 个答案: