Question

我的emberjs应用程序中有一个选项卡窗格（bootstrap），第一个选项卡应该从一开始就处于活动状态。我发现有些网站可以在handelbars中获取每个循环的索引，如{{#if @first}}，但它不起作用。

最简单的解决办法是什么？

代码如下所示：

<ul class="nav nav-tabs">
  {{#each model.languages}}
    <li><a href="#{{this.language}}" data-toggle="tab">{{this.language}}</a</li>
  {{/each}}
</ul>

<div class="localized-system-info tab-content">
  {{#each model.systemLanguages}}
    <!-- forms -->
  {{/each}}
</div>

Answer 1

如果您的第一个标签始终是所选标签，那么您可以执行以下操作：

// controller.js
languages: function() {
    // Assuming the languages are already ordered
    var isFirst = true;
    return this.get('model.languages').map(function(language) {
        var obj = {
            language: language,
            isFirst: isFirst
        };

        isFirst = false;

        return obj;
    });
}.property('model.languages.[]')

然后在你的模板中：

{{#each languages}}
    {{#if isFirst}}

    {{else}}

    {{/if}}
{{/each}}

这应该允许您为第一种语言实现任何自定义功能，但不能实现其余功能。

在Ember Js Handlebars中设置Active Tab窗格

1 个答案: