2011-12-24 31 views
5

Estoy probando jsRender.jsrender if-else usando {{= propName}}

Lo que quiero hacer:

plantilla

JS:

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

En otra JS:

function getCurrentTheaterId() { 
    return "523"; 
} 

Básicamente, en la plantilla, si el ID del teatro actual en la iteración coincide con lo que está regresó de la función js, luego estableció la clase a activa. El "{{= theaterId}}" se rompe en la condición if. Supongo que no puedes acceder a las propiedades json actuales en la condición if.

¿Alguna idea sobre cómo hacer esto?

Espero que tenga sentido. ¡Gracias!

Respuesta

6

En su programa de ejemplo que tienen la siguiente:

$.views.allowCode = true;/ 

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

[Editar]

Tienes que 'decirle' jsRender acerca de la función externa. Aquí está un ejemplo de trabajo:

<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] A más complicada condición booleana:

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

Lo siento, debería haber mencionado que ya lo tengo. –

+0

Edité mi publicación original con código de muestra. –

+0

Gracias Steve. Según mi descripción, {{= theatreId}} en la condición if es la parte que se rompe, no la parte de la función. Gracias también. –

2

& & no contó con el apoyo hasta que se puso a disposición un candidato beta reciente. La cantidad de lógica que podría hacer declarativamente en la plantilla era limitada, y no incluía & & o ||. Sin embargo, el soporte para operadores de comparación ahora es muy completo. Hay algunos ejemplos aquí: http://borismoore.github.com/jsrender/demos/step-by-step/10_comparison-tests.html

+0

FYI: Boris Moore es el autor de jsRender y jsViews! –