javascript - Emberjs切换动态数据的效果

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

这是我的车把：

{{#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操作

这是我的控制器：

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

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

这很好用；但是，如果我单击公司名称，则会显示所有公司详细信息，而不仅仅是我单击的公司。我显然只想显示我单击的公司的详细信息，我该如何处理？

最佳答案

将属性添加到模型中每个名为isDetailsShown的项目。

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

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

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

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

最后修改模板中的if条件，使其看起来像

{{#if item.isDetailsShown}}