javascript - Ember JS : can't insert an element into the DOM that has already been inserted

Question

编辑:精简 JSBin link

我遇到了一个问题，当我创建新记录时，我收到一条错误消息“未捕获的异常:您无法将元素插入已插入的 DOM 中”。

摘自index.html:

<ul id="flowList">
  {{#each}}
    {{#if isTemplate}}
      {{view App.FlowView}}
    {{/if}}
  {{/each}}
</ul>

<ul id='levelsList'>
  <ul id='level1'>
    {{#each}}
      {{#if isLevelOne}}
        {{view App.FlowView}}
      {{/if}}
    {{/each}}
  </ul>
</ul>

我预加载了一个 Flow 对象，isLevelOne 为 false，isTemplate 为 true。它有一个按钮，用于创建一个新流，使得计算属性 isLevelOne 为 true，属性 isTemplate 为 false —— 我在 Ember Inspector 中验证了这一点。但是，当发生这种情况时，我会得到一个未捕获的异常:尽管页面似乎渲染正常，但您无法将元素插入已插入的 DOM 中。当我尝试刷新页面(将新记录保存到商店中)时，它无法渲染页面并抛出一个 Error: Something you did导致 View 在渲染之后但在插入之前重新渲染进入 DOM。 这些错误对我来说都没有任何意义——任何帮助将不胜感激。

编辑:下面包含 FlowView 模板

<script type="text/x-handlebars" data-template-name='flow-view'>
  <li {{bind-attr id=title class=":flow isTemplate"}}>
    {{#if isTemplate}}
      <button {{action "insertIntoSandbox" this}}>&plus;</button>
    {{/if}}
    <label>{{title}}</label>
    {{#unless isDefault}}
      <button {{action "removeFlow" this}} {{bind-attr class="isTemplate"}}>&minus;</button>
    {{/unless}}
   </li>
</script>

编辑:在下面添加 PortkeyController

App.PortkeyController = Ember.ArrayController.extend({
  actions: {
    /**
     * @elem is the flow associated with the button -- can use this to duplicate
     */
    insertIntoSandbox: function(elem) {
      var _store = this.store;

      var newFlowJSON = elem.toJSON();
      console.log(newFlowJSON); // isDefault=true, isTemplate=true, params=[] from element
      delete newFlowJSON.id; // might be unnecessary?

      newFlowJSON.title = 'gg';
      newFlowJSON.level = 1;
      newFlowJSON.isLevelOne = false;
      var newFlow = _store.createRecord('flow', newFlowJSON);
      newFlow.save();
  },
});

Answer 1

我也怀疑，当尝试删除/添加元素时，Ember 通常会因为无效的 HTML 而陷入困惑。 (我不确定是 Ember 还是浏览器通过为您注入(inject)结束标记来提供帮助，然后 Ember 没有删除浏览器帮助标记)

FlowView 缺少结束 LI 标记。