Batched changes don't "batch" binding exports

[justinbmeyer]

The problem is with a template like this:

		<export-child a:to="this.a" b:to="this.b"/>

		{{#if(this.a) }}
			<import-child a:from="this.a" b:from="this.b"/>
		{{/if}}

Even if <export-child>'s a and b change in a batch to truthy values, <import-child> will be initialized with the new value of a, but not the new value of b. This can be seen here:

https://codepen.io/justinbmeyer/pen/yEGGoK

queues.log() can explain why:

NOTIFY running  : Observation<<export-child>.a>.onDependencyChange 
NOTIFY running  : Observation<<export-child>.b>.onDependencyChange 
DERIVE running  : Observation<<export-child>.a>.update 
NOTIFY running  : SetterObservable<<export-child>.a>.handler 
DERIVE running  : Observation<<export-child>.b>.update 
NOTIFY running  : SetterObservable<<export-child>.b>.handler 
DOM_UI running  : <export-child a:to="this.a"> updates {{this.a}} from <export-child>.a  (A)
NOTIFY running  : Observation<ScopeKeyData{{this.a}}.read>.onDependencyChange 
DERIVE running  : Observation<ScopeKeyData{{this.a}}.read>.update 
NOTIFY running  : ScopeKeyData{{this.a}}.dispatch 
NOTIFY running  : Observation<truthyObservation>.onDependencyChange 
DERIVE running  : Observation<truthyObservation>.update 
NOTIFY running  : Observation<{{if(this.a)}}>.onDependencyChange (B)
DERIVE running  : Observation<{{if(this.a)}}>.update 
{a: 1} (C)
NOTIFY running  : SetterObservable<{{if(this.a)}}>.handler 
NOTIFY running  : Observation<{{#if(this.a)}}>.onDependencyChange 
DERIVE running  : Observation<{{#if(this.a)}}>.update 
NOTIFY running  : live.html update::Observation<{{#if(this.a)}}> (D)
DOM_UI running  : <export-child b:to="this.b"> updates {{this.b}} from <export-child>.b (E)

Before (A), all observables created by can-stache-bindings are updating.

• However at (A), the updating of right hand observable of a:to=this.a is updated in the DOM_UI queue.
• This then causes an update of {{if(this.a)}} at (B), which renders the <import-child> component at (C).
• It's not until (E) that the update of the right hand observable of b:to=this.b happens.

I don't this is expected behavior, but at the same time, I'm not entirely sure how to fix it.

Work around

Only mount the component if you have what you need:

		<export-child a:to="this.a" b:to="this.b"/>

		{{#and(this.a, this.b) }}
			<import-child a:from="this.a" b:from="this.b"/>
		{{/and}}

Thoughts on a fix

Somehow, both right hand observables need to update before stache updates what's in-between {{#if}}. Currently however, stache MUST at least listen for changes in NOTIFY, this is so it can immediately tear down any children.

But I'm not sure stache should be re-evaluating in DERIVE.

I could see re-organizing into the following queues:

• notify - stache listens for changes here so it can "teardown" anything old, but doesn't re-evaluate until later.
• derive - normal Observation updates here. Two-way bindings update here.
• UI - stache re-evaluates here.
• DOM - can-view-live applies actual DOM changes here
• MUTATE - same as previous

[justinbmeyer]

A component test

		QUnit.test("double parent update", function() {
			var parentVM = new SimpleMap({
				parentValue: ""
			});
			Component.extend({
				tag: "parent-that-gets",
				viewModel: parentVM,
				view: stache('<child-that-updates child:to="this.parentValue"/>')
			});

			Component.extend({
				tag: "child-that-updates",
				viewModel: new SimpleMap({
					child: "CHILD1"
				}),
				view: stache('<gc-that-updates gc:to="this.child"/>')
			});

			Component.extend({
				tag: "gc-that-updates",
				viewModel: new SimpleMap({
					gc: "gc"
				})
			});

			var template = stache("{{# if(this.show) }}<parent-that-gets/>{{/if}}");
			var root = new SimpleMap({show: false});
			template(root);
			root.set("show", true);

			QUnit.equal(parentVM.get("parentValue"), "gc")
		});