Ember.js组件移动DOM元素

Question

我有一个名为table-viewer的Ember.js组件。它有一个带有按钮的div工具栏。我有另一个名为report-viewer的余烬组件。它包含各种内容，包括table-viewer。

我希望report-viewer在工具栏中添加一些按钮。我有什么工作，但打破了与元素的Ember连接，所以我不能在移动它后更改按钮文本。有更好的方法吗？

我有比我刚才说的更多的组件，因此在table-viewer中定义完整的工具栏并设置显示内容的标志会很难管理。

以下是我目前在table-viewer中的内容，以便任何组件都可以向工具栏添加其他按钮：

Ember.$('#toolbar').append(Ember.$('#additionalToolbar').html());
Ember.$('#additionalToolbar').remove();

Answer 1

我明白了！以下工作不会破坏Ember连接：

Ember.$('#additionalToolbar > button').appendTo(Ember.$('#toolbar'));

Answer 2

如果没有看到相关代码，很难说最好的方法是什么。也就是说，我的第一个建议是简单的收益：

报告查看器/ template.hbs

{{#table-viewer}}
  <button>
    Some button from the report viewer...
  </button>
{{/table-viewer}}

表格查看器/ template.hbs

<nav>
  <button>
    Button one
  </button>
  <button>
    Button two
  </button>
  {{yield}}
</nav>
<table>
  ...
</table>

如果您需要更多的收益率，您可以实现多个命名收益率with this approach。

如果你还没有，我还建议将工具栏拆分成自己的组件。如上所述，将工具栏按钮作为table-viewer组件的块内容是错误的。