1

動的に作成されたリストがありますが、各要素は共通の構造といくつかの変数を持つかなり大きな HTML チャンクです。
jQueryでそれを行う最良の方法は何ですか?

4

5 に答える 5

2

クライアントで大量の HTML を処理する 1 つの方法は、テンプレート システムを使用することです。jQuery中心に保ちたい場合は、jQueryテンプレートが1つの選択肢ですが、それは廃止されたと思います.

高速で使いやすいアンダースコア テンプレートで多くの成功を収めました。

于 2012-05-02T13:11:47.073 に答える
1

これがあなたにとってやり過ぎかどうかはわかりませんが、テンプレートライブラリをチェックしてください。

https://github.com/janl/mustache.jsは私が聞いたことが本当に良いです（個人的にそれを使用していません）。

Underscore.jsのものを使用しました

後者は次のようになります。

var myTemplate = _.template("<div>This is my reusable block with {{ count }} variables");

$.each([1,2,3,4], function(elm, i){
  $('body').append(myTemplate ({count: elm}));
})

これがjsfiddleの例ですhttp://jsfiddle.net/K8VHb/

于 2012-05-02T13:10:11.483 に答える
1

CambridgeMike と Simon Smith が言った「テンプレート ライブラリを使用する」という言葉を繰り返します。Handlebars.jsを使用します。これは Ember.js が選んだものと同じで、優れたスタンドアロンであり、Backbone.js ともうまく組み合わせられます。

長くお使いいただける一品です。

于 2012-05-02T13:22:27.577 に答える
0

配列の結合方法 (要素を文字列に連結する) を利用することは、私のお気に入りのアプローチです。これを JQ と一緒に使用すると、JS テンプレート ライブラリの魅力をまったく理解できませんでした。また、JavaScript で改行を気にせずに、HTML を読みやすいスタイルにフォーマットするのにも便利です。私はこれをテストしていないので、構文が間違っている可能性があります。

var standardList = [
    '<li>Always here</li><!--could add a bunch more non-variable LIs here-->',
    '<li>',
    , //this is key #2 - one comma per line at the end makes counting easy
    '</li>',
    '<li>More non-variable LIs</li><!--possibly more non-variable LIs here-->',
    '<li>',
    , //this is key #6
    '</li>'
];

//you could have lots of these or an array of them dropped in from a server
var variableListItems = {
    key_2:'first Var list value',
    key_6:'second variable list value'
};

function buildFromListTemplate(valuesObj,listTemplate){
    for(var x in valuesObj){
        listTemplate[x.split('_')[1]] = valuesObj[x];

        //x.split('_') returns array ['key',<number>] for each key in object
        //so [1] gives array key
    }
    return listArray.join(''); //smooshes array into one big string
}

$('#someExistingUL').html(
    buildFromListTemplate(variableListItems, standardList)
);

注: 強力だが簡単なアップグレードは、buildFromListTemplate 関数内で値の LI ラッピングを処理することです。そうすれば、値オブジェクト内に配置するキーはすべてオプションになり、指定されていない場合でも空白の LI が残ることはありません。

HTML の大きな塊をフォーマットすることになると、分割/結合はあなたの友人であり、一般的に強力なユーティリティを持っています. もう 1 つの便利な使い方は、既存の値のセットからリストまたはテーブルの行を作成することです。

var ulHtmlString = [
'<ul><li>',
    arrayOfValues.join('</li><li>'),
'</li></ul>'
].join('')

これに基づいて、2D 配列をテーブルに自動変換することもできます。いくつかの regEx (split メソッドの文字列の代わりに使用できます) を学ぶと、HTML が統一されていない場合に、HTML からデータのみの配列とオブジェクトに簡単に戻すことができます。

于 2012-05-02T14:26:03.687 に答える
-1

jQuery テンプレートを使用します。

jquery テンプレートの使用は、次の 2 つの部分で構成されます。

テンプレート (通常は HTML):

<script id="myTemplate" type="text/x-jquery-tmpl">
    <div>${text} ${otherStuff}</div>
</script>

およびデータ (通常は JSON または JavaScript オブジェクト):

var data = { text: 'hello world!', otherStuff: 'foobar' };

次に、データをテンプレートにバインドするだけです

var resultingHTML = $('#myTemplate').tmpl(data);

次に、結果の HTML を DOM に追加します。

$('#someContainer').append(resultingHTML);

jQuery テンプレートは、{{if}} や {{each}} などのテンプレートの条件/ループで多くの柔軟性を提供し、JSON は非常に簡単に操作できるデータ転送言語です。

于 2012-05-02T13:20:59.947 に答える