javascript - Emberjs动态数据切换效果

Question

我有一个表，其中加载了来自 api 的动态数据。 <td></td>显示公司名称，单击时我想要一个包含要显示的公司信息的 div。我看到了一些例子，这就是我所做的:

这是我的 Handlebars :

{{#each m in model}}
    <tr>
        <td >
            <p {{ action 'displayDetails' }}>{{m.name}}</p>
            {{#if showDetails}}
                <div class="company_details">
                    <p><strong>Wesbite URL: </strong><a href="{{m.website}}">{{m.website}}</a></p>
                    <p><strong>Development Wesbite URL: </strong><a href="{{m.dev_website}}">{{m.dev_website}}</a></p>
                </div>
            {{/if}} 
        </td>
    </tr>
{{/each}}

正如您所见，当您单击公司名称时，将调用 displayDetails 操作

这是我的 Controller :

export default Ember.ArrayController.extend({
    showDetails: false,

    actions: {
        displayDetails: function(){
            this.toggleProperty('showDetails');
        }
    }
});

这很好用；但是，如果我单击公司名称，所有公司详细信息都会显示，而不仅仅是我单击的公司。我显然只是想显示我点击的公司的具体详细信息，我该怎么做？

Answer 1

为模型中的每个项目添加一个属性，名称类似于 isDetailsS​​hown。

您可以通过将项目传递到方法中来修改您的操作。

<p {{ action 'displayDetails' item}}>{{m.name}}</p>

在操作中，只需切换传入项目的属性即可。

displayDetails: function(item){
  item.toggleProperty('isDetailsShown');
}

最后修改模板中的if条件如下

{{#if item.isDetailsShown}}