javascript - jsrender if-else 使用 {{=propName}}

标签 javascript plugins jsrender

我正在试用 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 属性。

关于如何做到这一点有什么想法吗?

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

最佳答案

在他们的示例程序中,他们有这个:

$.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] 更复杂的 bool 条件:

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

关于javascript - jsrender if-else 使用 {{=propName}},我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8622045/

相关文章:

jsrender - 如何保留 JsViews 的辅助函数生成的 HTML 标签

javascript - 在与 Vue.js 具有相同根的组件之间访问数据

javascript - 如何重写 Node.js 模块中的函数?

multithreading - 在新线程(Rust)中从共享库执行异步函数

c++ - 如何使用 std 函数注册单例 qml 类型以在 Qt 中进行回调?

jsrender - 检查 JsRender 中的 props 长度

javascript - sails.js 中关联模型的 Where 子句

javascript - 检查任意值是否对称

jQuery 代码无法在 Google Chrome 中运行

javascript - 条件语句在 jsrender v1.0pre 中有效吗?