Question

我有一个表来自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切换动态数据的效果

1 个答案: