Collection view throwing "You can't insert an element into the DOM that has already been inserted"

[crofty]

I've got another issue in my app relating to collection views. I've reduced it down to a failing test case which is below. I've run the test against previous versions of the code and verifed that it used to pass.

The breaking change was introduced in 0ae26af.

What I am trying to do is render a CollectionView within a view that has bindings to an object - datasetController. When I swap out the dataset for another one, I'd expect the rendered html to update to reflect the new dataset. Instead, I'm getting the following error:

You can't insert an element into the DOM that has already been inserted

Test case is:

test("should allow view objects to be swapped out without throwing an error", function() {
  var view, dataset, secondDataset;

  SC.run(function() {
    TemplateTests.datasetController = SC.Object.create();

    TemplateTests.ReportingView = SC.View.extend({
      datasetBinding: 'TemplateTests.datasetController*dataset',
      readyBinding: 'dataset.ready',
      itemsBinding: 'dataset.items',
      template: SC.Handlebars.compile("{{#if ready}}{{collection TemplateTests.CollectionView}}{{else}}Loading{{/if}}")
    });

    TemplateTests.CollectionView = SC.CollectionView.extend({
      contentBinding: 'parentView.parentView.items',
      tagName: 'ul',
      template: SC.Handlebars.compile("{{content}}")
    });

    view = TemplateTests.ReportingView.create();
  });

  SC.run(function() {
    view.appendTo('#qunit-fixture');
  });

  equals(view.$().text(), "Loading", "renders the loading text when the dataset is not ready");

  SC.run(function() {
    dataset = SC.Object.create({
      ready: true,
      items: [1,2,3]
    });
    TemplateTests.datasetController.set('dataset',dataset);
  });

  equals(view.$('ul > li').length, 3, "renders the collection with the correct number of items when the dataset is ready");

  SC.run(function() {
    secondDataset = SC.Object.create({ready: false});
    TemplateTests.datasetController.set('dataset',secondDataset);
  });

  equals(view.$().text(), "Loading", "renders the loading text when the second dataset is not ready");

});

[ebryn]

I can get the test to pass if you dataset.set('ready', false) rather than setting secondDataset.

test("should allow view objects to be swapped out without throwing an error", function() {
  var view, dataset, secondDataset;

  SC.run(function() {
    TemplateTests.datasetController = SC.Object.create();

    TemplateTests.ReportingView = SC.View.extend({
      datasetBinding: 'TemplateTests.datasetController*dataset',
      readyBinding: 'dataset.ready',
      itemsBinding: 'dataset.items',
      template: SC.Handlebars.compile("{{#if ready}}{{collection TemplateTests.CollectionView}}{{else}}Loading{{/if}}")
    });

    TemplateTests.CollectionView = SC.CollectionView.extend({
      contentBinding: 'parentView.parentView.items',
      tagName: 'ul',
      template: SC.Handlebars.compile("{{content}}")
    });

    view = TemplateTests.ReportingView.create();
  });

  SC.run(function() {
    view.appendTo('#qunit-fixture');
  });

  equals(view.$().text(), "Loading", "renders the loading text when the dataset is not ready");

  SC.run(function() {
    dataset = SC.Object.create({
      ready: true,
      items: [1,2,3]
    });
    TemplateTests.datasetController.set('dataset',dataset);
  });

  equals(view.$('ul > li').length, 3, "renders the collection with the correct number of items when the dataset is ready");

  SC.run(function() {
    dataset.set('ready', false);
  });

  equals(view.$().text(), "Loading", "renders the loading text when the second dataset is not ready");

});

[ebryn]

I do think there is a bug here potentially. I'm investigating.

[ebryn]

Fixed in: https://github.com/sproutcore/sproutcore20/pull/80

[ebryn]

Fixed on master now.