2011-12-24 16 views
5

私はjsRenderをしようとしています。jsrenderのif-else {{=たpropNameを}}を使用して

JSテンプレート:他のJSで

<script id="theaterTemplate" type="text/x-jquery-tmpl"> 
    {{* 
     if ("{{=theaterId}}" == getCurrentTheaterId()) { 
    }} 
     <a class="active" href="#"> 
    {{* 
     } else { 
    }}   
     <a href="#">   
    {{* } }} 
     {{=theaterName}} 
    </a> 
</script> 

:私は何をしたいか

function getCurrentTheaterId() { 
    return "523"; 
} 

基本的には、テンプレートでは、繰り返し処理の現在の劇場idが何一致した場合js関数から返されたクラスをアクティブに設定します。 "{{= theaterId}}"はif条件でブレークします。私はif条件で現在のjsonプロパティにアクセスすることは許されないと思います。

これを行う方法に関するアイデアはありますか?

うまくいけばうまくいきます。ありがとう!

$.views.allowCode = true;/ 

http://borismoore.github.com/jsrender/demos/step-by-step/11_allow-code.html

[編集]

あなたは、外部関数についてjsRender 'を伝える' する必要があります:彼らはこれを持っている彼らのサンプル・プログラムで

答えて

6

<script type="text/javascript"> 
     function IsSpecialYear() 
     { 
      return '1998'; 
     } 

     // tell jsRender about our function 
     $.views.registerHelpers({ HlpIsSpecialYear: IsSpecialYear }); 

    </script> 

    <script id="movieTemplate" type= "text/html"> 

     {{#if ReleaseYear == $ctx.HlpIsSpecialYear() }} 
      <div style="background-color:Blue;"> 
     {{else}} 
      <div> 
     {{/if}} 
      {{=$itemNumber}}: <b>{{=Name}}</b> ({{=ReleaseYear}}) 
     </div> 

    </script> 

    <div id="movieList"></div> 

<script type="text/javascript"> 

    var movies = [ 
     { Name: "The Red Violin", ReleaseYear: "1998" }, 
     { Name: "Eyes Wide Shut", ReleaseYear: "1999" }, 
     { Name: "The Inheritance", ReleaseYear: "1976" } 
    ]; 

    $.views.allowCode = true; 

    $("#movieList").html(
     $("#movieTemplate").render(movies) 
    ); 

</script> 

[EDIT 2]より複雑なブール条件:ここでは実施例の最近のベータ版の候補が利用可能になるまで

function IsSpecialYear(Year, Index) 
    { 
     if ((Year == '1998') && (Index == 1)) 
      return true; 
     else 
      return false; 
    } 

    // tell jsRender about our function 
    $.views.registerHelpers({ HlpIsSpecialYear: IsSpecialYear }); 

</script> 

<script id="movieTemplate" type= "text/html"> 

{{#if $ctx.HlpIsSpecialYear(ReleaseYear, $itemNumber) }} 
    <div style="background-color:Blue;"> 
{{else}} 
    <div> 
{{/if}} 
+0

申し訳ありませんが、私はその既に持っていることに言及している必要があります。 –

+0

オリジナルの投稿をサンプルコードで編集しました。 –

+0

ありがとうSteve。私の説明から、if条件の{{theaterId}}は、関数の部分ではなく、壊れる部分です。ありがとうtho。 –

2

& &がサポートされていませんでした。テンプレートで宣言的に実行できるロジックの量は限られていて、& &または||は含まれていませんでした。しかし、比較演算子のサポートは非​​常に完了しました。いくつかの例がここにあります:http://borismoore.github.com/jsrender/demos/step-by-step/10_comparison-tests.html

+0

FYI:Boris MooreはjsRenderとjsViewsの作者です! –

関連する問題