来自 Ember.js 框架的两个设计问题；

Question

我有两个问题：

有什么方法可以让我使用 showing/hiding 内容的按钮
分别为每个循环中的每个项目？因为我只会
切换单曲属性.
有什么方法可以让我慢慢显示内容而不是立即显示

Answer 1

第一个问题的答案：

是的，请看演示：Ember Twiddle。

基本上，您需要在一个循环中操作每个项目的 visible 属性并添加 {{if}} 以仅在 visible === true 时呈现您的内容。代码：

{{#each animals as |item|}}
  {{#if item.visible}}
     <b>{{item.name}} is visible!</b>
  {{/if}}
  <br/>
  <button onclick={{action (mut item.visible) (if item.visible false true)}}>{{if item.visible 'Hide' 'Show'}} {{item.name}}</button>
  <br/>
{{/each}}

第二个问题的答案 - 您可以使用 CSS 转换来实现。基本上，您可以在要显示元素时向元素添加 class show - 然后添加 CSS 过渡以缓慢淡入内容。

Answer 2

1 hide/show 每个循环中的内容

最好的办法是使用组件：

{{#each foos as |foo|}}
  {{foo-item foo=foo}}
{{/each}}

然后您可以对组件内的单个项目使用您已经知道的相同技术。

2 做动画

这里的一个好方法是插件 ember-liquid-fire。

来自 Ember.js 框架的两个设计问题；

Two design questions from Ember.js framework;

ember.js

1 hide/show 每个循环中的内容

2 做动画