Ember.js：动画删除/删除项目或记录

Question

我正在使用Ember 1.13，using ember-liquid-fire用于其他一些事情，但有了这个，我想通过淡化或滑动来删除记录。就像现在一样，它会立即消失，这有点刺耳。

这是UI;模板只是使用{{#each}}助手迭代模型

这是我的删除操作：

delete: function(item) {
  this.get('model').removeObject(item);
  item.destroyRecord();
}

有人在其他地方建议使用{{liquid-bind}}，但我不确定将其放在我的标记中，因为我使用的是表格，{{each}}包裹了<tr>，所以，如果我把液体助手放在那里，那么div作为我的桌子的孩子而不是行。

如果有人知道怎么做（使用液体火或其他方式），我很想知道！

Answer 1

应该更改绑定项以触发液体射击。

请查看this twiddle

Answer 2

我没有尝试使用液体火，而是使用animate.css更简单的路线。

为此，我必须为表行创建一个组件。 liquid-fire divs会插入//components/table-record.js actions: { handleDelete(item) { this.$().addClass('animated zoomOut'); this.$().one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', () => { this.sendAction('deleteAction',item); } ); } } ，这当然会混淆桌面布局。

在我的组件中，我只是添加动画类，当动画完成后，发送动作以删除项目，如下所示：

  Scenario: Bulk import of portfolios and treaties
    Given the user logs into “dev” environment as “User ” with password "Password1"
    And the user Chooses to import a portfolio providing SQLServer as "10.10.10.10”
    And the user chooses uploaded Anytime
    And the user enters the filter criteria for “Client_EDM”
    And the user expands the Edm
    And the user expands the portfolios dropdown
    And the user chooses the Name as "UK COM for v0.7"
    And the user chooses the contract as ""

  Scenario Outline: Import of portfolio
    Given the user clicks on Import button
    And the user specifies the ImportJobName as "<ImportName>"
    And the user specifies the project "<EDM>"
    And the user specifies the structure "<StructureName>"
    And the user submits a portfolio for Import
    Examples:
      | EDM              | ImportName           | StructureName|
      |Client1_EDM|EUFL_UK_Com_Import100|EUFLCom_Import101|
      |Client2_EDM|EUFL_UK_Com_Import101|EUFLCom_Import101|

有关详细信息，请参阅this twiddle。