动态数据的Emberjs切换效果

Question

我有一个 table 加载了来自 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');
        }
    }
});

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

Answer 1

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

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

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

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

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

最后将模板中的if条件修改为

{{#if item.isDetailsShown}}

动态数据的Emberjs切换效果

Emberjs toggle effect of dynamic data

javascript

ember.js

ember-cli