0

ajaxとjQueryAppend（）を使用して、すべてが正常に機能しているdivにいくつかのアイテムを配置します。私の質問は、すべてのhtmlコードをAppend（）行に配置する代わりに、divのテンプレートに何らかのソートを設定できるかどうかです。

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>

jQueryAPI-新しい要素の作成

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

ハンドルバーは、外部ファイルからテンプレートをロードすることもでき、ループとif/elseステートメントをサポートします。

于 2012-10-14T20:59:17.967 に答える