使用jQuery附加和/或模板？

使用ajax和jQuery Append（）將一些項目放入一個工作正常的div中。我的問題是我可以設置某種模板的div而不必將所有的HTML代碼放入Append（）行？使用jQuery附加和/或模板？

2012-10-14 user1166905

谷歌**的JavaScript模板**，你會得到相當多的點擊量。有大量的圖書館，所以看看他們幾個，看看他們是否符合你的需求。 – Blender

看看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-14 20:50:39

您要找的是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; 
},

當然還有許多其他的模板引擎。

來源

2012-10-14 20:39:42

有很多的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>

把手也可以從外部文件加載模板，支持循環和if/else語句。

來源

2012-10-14 20:59:17

我不確定這是否是您的意思，但您可以在創建新元素時傳遞屬性的對象。例如：

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

來源

2012-10-14 21:00:15 billyonecan

使用jQuery附加和/或模板？

回答

相關問題