fix(composition): bindable bug on composed instances

Fixes aurelia/dialog#64

src/bindable-property.js

@@ -2,11 +2,16 @@ import 'core-js';
 import {_hyphenate} from './util';
 import {BehaviorPropertyObserver} from './behavior-property-observer';
 import {bindingMode} from 'aurelia-binding';
+import {Container} from 'aurelia-dependency-injection';
 
 function getObserver(behavior, instance, name) {
   let lookup = instance.__observers__;
 
   if (lookup === undefined) {
+    if(!behavior.isInitialized) {
+      behavior.initialize(Container.instance || new Container(), instance.constructor);
+    }
+
     lookup = behavior.observerLocator.getOrCreateObserversLookup(instance);
     behavior._ensurePropertiesDefined(instance, lookup);
   }

src/composition-engine.js

@@ -4,6 +4,7 @@ import {HtmlBehaviorResource} from './html-behavior';
 import {BehaviorInstruction, ViewCompileInstruction} from './instructions';
 import {DOM} from 'aurelia-pal';
 import {Container, inject} from 'aurelia-dependency-injection';
+import {metadata} from 'aurelia-metadata';
 
 /**
 * Instructs the composition engine how to dynamically compose a component.
@@ -96,22 +97,22 @@ export class CompositionEngine {
     let childContainer;
     let viewModel;
     let viewModelResource;
-    let metadata;
+    let m;
 
     return this.ensureViewModel(context).then(tryActivateViewModel).then(() => {
       childContainer = context.childContainer;
       viewModel = context.viewModel;
       viewModelResource = context.viewModelResource;
-      metadata = viewModelResource.metadata;
+      m = viewModelResource.metadata;
 
       let viewStrategy = this.viewLocator.getViewStrategy(context.view || viewModel);
 
       if (context.viewResources) {
         viewStrategy.makeRelativeTo(context.viewResources.viewUrl);
       }
 
-      return metadata.load(childContainer, viewModelResource.value, null, viewStrategy, true);
-    }).then(viewFactory => metadata.create(childContainer, BehaviorInstruction.dynamic(context.host, viewModel, viewFactory)));
+      return m.load(childContainer, viewModelResource.value, null, viewStrategy, true);
+    }).then(viewFactory => m.create(childContainer, BehaviorInstruction.dynamic(context.host, viewModel, viewFactory)));
   }
 
   /**
@@ -140,10 +141,10 @@ export class CompositionEngine {
       });
     }
 
-    let metadata = new HtmlBehaviorResource();
-    metadata.elementName = 'dynamic-element';
-    metadata.initialize(context.container || childContainer, context.viewModel.constructor);
-    context.viewModelResource = { metadata: metadata, value: context.viewModel.constructor };
+    let m = metadata.getOrCreateOwn(metadata.resource, HtmlBehaviorResource, context.viewModel.constructor);
+    m.elementName = m.elementName || 'dynamic-element';
+    m.initialize(context.container || childContainer, context.viewModel.constructor);
+    context.viewModelResource = { metadata: m, value: context.viewModel.constructor };
     childContainer.viewModel = context.viewModel;
     return Promise.resolve(context);
   }

src/html-behavior.js

@@ -45,6 +45,7 @@ export class HtmlBehaviorResource {
     this.containerless = false;
     this.properties = [];
     this.attributes = {};
+    this.isInitialized = false;
   }
 
   /**
@@ -95,6 +96,11 @@ export class HtmlBehaviorResource {
     let ii;
     let current;
 
+    if (this.isInitialized) {
+      return;
+    }
+
+    this.isInitialized = true;
     target.__providerId__ = nextProviderId();
 
     this.observerLocator = container.get(ObserverLocator);