在 Ember Js Handlebars 中设置活动选项卡窗格

Question

我的 emberjs 应用程序中有一个选项卡窗格（引导程序），第一个选项卡应该从一开始就处于活动状态。我发现一些站点可以在手栏中获取每个循环的索引，例如{{#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}}

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