如何在ectjs中迭代对象答案

【问题标题】：How to iterate objects in ectjs如何在ectjs中迭代对象
【发布时间】：2014-12-19 13:39:02
【问题描述】：

这是我的代码，

<div id="main" class="container">
    <% for danceCategory, i in @danceStyle : %>
        <% if @i? % 2 == 0 : %>
            <div class="row">
                <div class="col-md-5 zero_padding" align="center">
                    <img class="img-responsive" src='image/bollywood_master_class_image.png' />
                </div>
                <div class="col-md-7 zero_padding">
                    <div class="content_right">
                        <div>
                            <!-- <span class="heading_first"> #{danceCategory.category}&nbsp;</span> -->
                            <span class="heading_second"> <%- @danceCategory.category %> </span>
                        </div>
                        <ul class="dance_type">

                        </ul>
                    </div>
                </div>
            </div>
        <% else : %>
            <p>List is empty</p>
        <% end %>
    <% end %>
</div>

我正在尝试迭代舞蹈类别。

问题：

如何获取迭代的索引（本例为i）
<%- @danceCategory.category %> 不显示任何值（但我从节点传递值）

【问题讨论】：

标签： node.js user-interface express frontend ectjs

【解决方案1】：

应该这样做，确保在访问模板中的变量时不使用“@”访问器：

<div id="main" class="container">        
    <% for danceCategory, idx in @danceStyle : %>
        <span>The index is <%= idx %> and category is <%= danceCategory.category %></span>
            <% if idx % 2 == 0 : %>
            <div class="row">
                <div class="col-md-5 zero_padding" align="center">
                    <img class="img-responsive" src='image/bollywood_master_class_image.png' />
                </div>
                <div class="col-md-7 zero_padding">
                    <div class="content_right">
                        <div>
                            <span class="heading_second"> <%= danceCategory.category %> </span>
                        </div>
                        <ul class="dance_type"></ul>
                    </div>
                </div>
            </div>            
        <% else : %>
            <p>List is empty</p>
        <% end %>          
    <% end %>
</div>

参数：

{
    title : 'Hello, world!',
    id : 'main',
    danceStyle: [
        { category : 'Contemporary', type : 'Traditional Jazz' },
        { category : 'Skanking', type : 'Native American' },
        { category : 'Shuffling', type : 'Traditional Jazz' },
        { category : 'Chicago stepping', type : 'Native American' },
        { category : 'Detroit Ballroom', type : 'Traditional Jazz' },
        { category : 'Disco dancing', type : 'Native American' },
        { category : 'Drunken Sailor', type : 'Traditional Jazz' },
        { category : 'Linya vrak dance', type : 'Native American' },
        { category : 'Swing', type : 'Traditional Jazz' },
        { category : 'Stomp dance', type : 'Native American' },
        { category : 'Texas Swingout', type : 'Traditional Jazz' },
        { category : 'Texas slidethrough', type : 'Native American' },
        { category : 'Texas Tommy', type : 'Traditional Jazz' },
        { category : 'Skanking', type : 'Native American' },
        { category : 'Ballroom', type : 'Traditional Jazz' }
    ],  
    upperHelper : function (string) {
        return string.toUpperCase();
    }
}

输出

<!DOCTYPE html>
<html>

    <head>
        <title>Hello, world!</title>
    </head>

    <body>
        <div id="main" class="container"> <span>The index is 0 and category is Contemporary</span>

            <div class="row">
                <div class="col-md-5 zero_padding" align="center">
                    <img class="img-responsive" src='image/bollywood_master_class_image.png'
                    />
                </div>
                <div class="col-md-7 zero_padding">
                    <div class="content_right">
                        <div> <span class="heading_second"> Contemporary </span>

                        </div>
                        <ul class="dance_type"></ul>
                    </div>
                </div>
            </div> <span>The index is 1 and category is Skanking</span>

            <p>List is empty</p> <span>The index is 2 and category is Shuffling</span>

            <div
            class="row">
                <div class="col-md-5 zero_padding" align="center">
                    <img class="img-responsive" src='image/bollywood_master_class_image.png'
                    />
                </div>
                <div class="col-md-7 zero_padding">
                    <div class="content_right">
                        <div> <span class="heading_second"> Shuffling </span>

                        </div>
                        <ul class="dance_type"></ul>
                    </div>
                </div>
        </div> <span>The index is 3 and category is Chicago stepping</span>

        <p>List is empty</p> <span>The index is 4 and category is Detroit Ballroom</span>

        <div
        class="row">
            <div class="col-md-5 zero_padding" align="center">
                <img class="img-responsive" src='image/bollywood_master_class_image.png'
                />
            </div>
            <div class="col-md-7 zero_padding">
                <div class="content_right">
                    <div> <span class="heading_second"> Detroit Ballroom </span>

                    </div>
                    <ul class="dance_type"></ul>
                </div>
            </div>
            </div> <span>The index is 5 and category is Disco dancing</span>

            <p>List is empty</p> <span>The index is 6 and category is Drunken Sailor</span>

            <div
            class="row">
                <div class="col-md-5 zero_padding" align="center">
                    <img class="img-responsive" src='image/bollywood_master_class_image.png'
                    />
                </div>
                <div class="col-md-7 zero_padding">
                    <div class="content_right">
                        <div> <span class="heading_second"> Drunken Sailor </span>

                        </div>
                        <ul class="dance_type"></ul>
                    </div>
                </div>
                </div> <span>The index is 7 and category is Linya vrak dance</span>

                <p>List is empty</p> <span>The index is 8 and category is Swing</span>

                <div
                class="row">
                    <div class="col-md-5 zero_padding" align="center">
                        <img class="img-responsive" src='image/bollywood_master_class_image.png'
                        />
                    </div>
                    <div class="col-md-7 zero_padding">
                        <div class="content_right">
                            <div> <span class="heading_second"> Swing </span>

                            </div>
                            <ul class="dance_type"></ul>
                        </div>
                    </div>
                    </div> <span>The index is 9 and category is Stomp dance</span>

                    <p>List is empty</p> <span>The index is 10 and category is Texas Swingout</span>

                    <div
                    class="row">
                        <div class="col-md-5 zero_padding" align="center">
                            <img class="img-responsive" src='image/bollywood_master_class_image.png'
                            />
                        </div>
                        <div class="col-md-7 zero_padding">
                            <div class="content_right">
                                <div> <span class="heading_second"> Texas Swingout </span>

                                </div>
                                <ul class="dance_type"></ul>
                            </div>
                        </div>
                        </div> <span>The index is 11 and category is Texas slidethrough</span>

                        <p>List is empty</p> <span>The index is 12 and category is Texas Tommy</span>

                        <div
                        class="row">
                            <div class="col-md-5 zero_padding" align="center">
                                <img class="img-responsive" src='image/bollywood_master_class_image.png'
                                />
                            </div>
                            <div class="col-md-7 zero_padding">
                                <div class="content_right">
                                    <div> <span class="heading_second"> Texas Tommy </span>

                                    </div>
                                    <ul class="dance_type"></ul>
                                </div>
                            </div>
                            </div> <span>The index is 13 and category is Skanking</span>

                            <p>List is empty</p> <span>The index is 14 and category is Ballroom</span>

                            <div
                            class="row">
                                <div class="col-md-5 zero_padding" align="center">
                                    <img class="img-responsive" src='image/bollywood_master_class_image.png'
                                    />
                                </div>
                                <div class="col-md-7 zero_padding">
                                    <div class="content_right">
                                        <div> <span class="heading_second"> Ballroom </span>

                                        </div>
                                        <ul class="dance_type"></ul>
                                    </div>
                                </div>
                                </div>
                                </div>
                                <div id="footer">
                                    <div class="left">Generated by ECT</div>
                                    <div class="right">page: main</div>
                                </div>
    </body>

</html>

关于信息，我已经在 ectjs.com 上对此进行了测试，因为我无法在 jsfiddle 上复制它并且它可以工作。以下是上述问题的截图：

【讨论】：