2010-12-31 18 views
7

新しいjQueryテンプレートプラグインは、条件付き(3値)演算子をサポートしていますか?条件に応じて簡単な値を出力するには、{{if}}/{{else}}のみのオプションですか?jQueryテンプレートの条件演算子

私ははい、あなたは${}テンプレートタグ内に任意の関数や式を置くことができ<?=($reviewed ? 'ham' : 'spam')?>

答えて

16

に似たものに興味を持っています:

は、現在のデータ項目に指定したフィールド (プロパティ)を評価します、 または指定されたJavaScript関数 または式。

${reviewed ? 'ham' : 'spam'} 

だから、あなたは、このようなテンプレートを記述することができます。このような

<script id="movieTemplate" type="text/x-jquery-tmpl"> 
    <!-- Ternary operator to assign a class --> 
    <li class="${Year >= 1990 ? 'orange' : 'yellow'}"> 
     Title: ${Name}. 
     {{each Languages}} 
      ${$index + 1}: <em>${$value}. </em> 
     {{/each}} 
    </li> 
</script> 

考えると、JavaScriptとJSONデータ:

var movies = [ 
{ 
    Name: "Meet Joe Black", 
    Languages: ["French"], 
    Year: 1990 
}, 
{ 
    Name: "The Mighty", 
    Languages: [], 
    Year: 1985 
}, 
{ 
    Name: "City Hunter", 
    Languages: ["Mandarin", "Cantonese"], 
    Year: 1994 
}]; 

$("#movieTemplate").tmpl(movies).appendTo("#movieList"); 

これはに 'オレンジ' のクラスを適用します1990年以上の年数の映画、1990年未満の映画の「黄色」のクラスなどがあります。

実例はこちらhttp://jsfiddle.net/andrewwhitaker/dY43s/

+0

ありがとうアンドリュー。 –