jsrender if-else 使用 {{=propName}}答案

【问题标题】：jsrender if-else using {{=propName}}jsrender if-else 使用 {{=propName}}
【发布时间】：2011-12-24 01:21:32
【问题描述】：

我正在尝试 jsRender。

我想做什么：

JS 模板：

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

在其他 JS 中：

function getCurrentTheaterId() {
    return "523";
}

基本上，在模板中，如果迭代中的当前剧院 id 与 js 函数返回的内容匹配，则将类设置为活动。 "{{=theaterId}}" 在 if 条件中中断。我猜你不允许在 if 条件下访问当前的 json 属性。

关于如何做到这一点的任何想法？

希望这是有道理的。谢谢！

【问题讨论】：

标签： javascript plugins jsrender

【解决方案1】：

在他们的示例程序中，他们有这个：

$.views.allowCode = true;/

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

[编辑]

你必须'告诉' jsRender 关于外部函数。这是一个工作示例：

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

[编辑 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}}

【讨论】：

谢谢史蒂夫。根据我的描述，if 条件中的 {{=theaterId}} 是中断的部分，而不是函数部分。谢谢你。
我可能会按照你的方式尝试，只做 {{#if 与做我原来的 {{* if...
我绝对更喜欢你的方式！你知道是否可以这样做 {{#if ReleaseYear == $ctx.HlpIsSpecialYear() && $itemNumber == 1 }} ？我还没有做“&&”或“||”的运气在#if 条件下。非常感谢！！！

【解决方案2】：

&& 在最近的 beta 候选版本可用之前不受支持。您可以在模板中以声明方式执行的逻辑数量有限，并且不包括 && 或 ||。但是，现在对比较运算符的支持非常完整。这里有一些例子：http://borismoore.github.com/jsrender/demos/step-by-step/10_comparison-tests.html

【讨论】：

仅供参考：Boris Moore 是 jsRender 和 jsViews 的作者！