feat(view): added support for exportAs, so any directive can be assigned to a variable

This commit is contained in:
vsavkin
2015-06-04 13:45:08 -07:00
parent 4eb8c9b2dd
commit 69b75b7fd8
14 changed files with 298 additions and 140 deletions

View File

@ -8,8 +8,10 @@ import * as viewModule from './view';
export class ElementBinder {
nestedProtoView: viewModule.AppProtoView;
hostListeners: StringMap<string, Map<number, AST>>;
constructor(public index: int, public parent: ElementBinder, public distanceToParent: int,
public protoElementInjector: eiModule.ProtoElementInjector,
public directiveVariableBindings: Map<string, number>,
public componentDirective: DirectiveBinding) {
if (isBlank(index)) {
throw new BaseException('null index not allowed.');

View File

@ -317,7 +317,9 @@ export class DirectiveBinding extends ResolvedBinding {
callOnAllChangesDone: hasLifecycleHook(onAllChangesDone, rb.key.token, ann),
changeDetection: ann instanceof
Component ? ann.changeDetection : null
Component ? ann.changeDetection : null,
exportAs: ann.exportAs
});
return new DirectiveBinding(rb.key, rb.factory, deps, rb.providedAsPromise,
resolvedAppInjectables, resolvedHostInjectables,
@ -422,15 +424,6 @@ export class ProtoElementInjector {
eventEmitterAccessors: List<List<EventEmitterAccessor>>;
hostActionAccessors: List<List<HostActionAccessor>>;
/** Whether the element is exported as $implicit. */
exportElement: boolean;
/** Whether the component instance is exported as $implicit. */
exportComponent: boolean;
/** The variable name that will be set to $implicit for the element. */
exportImplicitName: string;
_strategy: _ProtoElementInjectorStrategy;
static create(parent: ProtoElementInjector, index: number, bindings: List<ResolvedBinding>,
@ -483,9 +476,6 @@ export class ProtoElementInjector {
constructor(public parent: ProtoElementInjector, public index: int, bd: List<BindingData>,
public distanceToParent: number, public _firstBindingIsComponent: boolean) {
this.exportComponent = false;
this.exportElement = false;
var length = bd.length;
this.eventEmitterAccessors = ListWrapper.createFixedSize(length);
this.hostActionAccessors = ListWrapper.createFixedSize(length);
@ -1164,15 +1154,6 @@ export class ElementInjector extends TreeNode<ElementInjector> {
hasInstances(): boolean { return this._constructionCounter > 0; }
/** Gets whether this element is exporting a component instance as $implicit. */
isExportingComponent(): boolean { return this._proto.exportComponent; }
/** Gets whether this element is exporting its element as $implicit. */
isExportingElement(): boolean { return this._proto.exportElement; }
/** Get the name to which this element's $implicit is to be assigned. */
getExportImplicitName(): string { return this._proto.exportImplicitName; }
getLightDomAppInjector(): Injector { return this._lightDomAppInjector; }
getShadowDomAppInjector(): Injector { return this._shadowDomAppInjector; }

View File

@ -1,7 +1,7 @@
import {Injectable} from 'angular2/di';
import {List, ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
import {isPresent, isBlank} from 'angular2/src/facade/lang';
import {isPresent, isBlank, BaseException} from 'angular2/src/facade/lang';
import {reflector} from 'angular2/src/reflection/reflection';
import {
@ -309,7 +309,7 @@ function _createElementBinders(protoView, elementBinders, allDirectiveBindings)
componentDirectiveBinding, directiveBindings);
_createElementBinder(protoView, i, renderElementBinder, protoElementInjector,
componentDirectiveBinding);
componentDirectiveBinding, directiveBindings);
}
}
@ -343,28 +343,20 @@ function _createProtoElementInjector(binderIndex, parentPeiWithDistance, renderE
parentPeiWithDistance.protoElementInjector, binderIndex, directiveBindings,
isPresent(componentDirectiveBinding), parentPeiWithDistance.distance);
protoElementInjector.attributes = renderElementBinder.readAttributes;
if (hasVariables) {
protoElementInjector.exportComponent = isPresent(componentDirectiveBinding);
protoElementInjector.exportElement = isBlank(componentDirectiveBinding);
// experiment
var exportImplicitName = MapWrapper.get(renderElementBinder.variableBindings, '\$implicit');
if (isPresent(exportImplicitName)) {
protoElementInjector.exportImplicitName = exportImplicitName;
}
}
}
return protoElementInjector;
}
function _createElementBinder(protoView, boundElementIndex, renderElementBinder,
protoElementInjector, componentDirectiveBinding): ElementBinder {
protoElementInjector, componentDirectiveBinding, directiveBindings): ElementBinder {
var parent = null;
if (renderElementBinder.parentIndex !== -1) {
parent = protoView.elementBinders[renderElementBinder.parentIndex];
}
var directiveVariableBindings = createDirectiveVariableBindings(renderElementBinder, directiveBindings);
var elBinder = protoView.bindElement(parent, renderElementBinder.distanceToParent,
protoElementInjector, componentDirectiveBinding);
protoElementInjector, directiveVariableBindings, componentDirectiveBinding);
protoView.bindEvent(renderElementBinder.eventBindings, boundElementIndex, -1);
// variables
// The view's locals needs to have a full set of variable names at construction time
@ -377,6 +369,49 @@ function _createElementBinder(protoView, boundElementIndex, renderElementBinder,
return elBinder;
}
export function createDirectiveVariableBindings(renderElementBinder:renderApi.ElementBinder,
directiveBindings:List<DirectiveBinding>): Map<String, number> {
var directiveVariableBindings = MapWrapper.create();
MapWrapper.forEach(renderElementBinder.variableBindings, (templateName, exportAs) => {
var dirIndex = _findDirectiveIndexByExportAs(renderElementBinder, directiveBindings, exportAs);
MapWrapper.set(directiveVariableBindings, templateName, dirIndex);
});
return directiveVariableBindings;
}
function _findDirectiveIndexByExportAs(renderElementBinder, directiveBindings, exportAs) {
var matchedDirectiveIndex = null;
var matchedDirective;
for (var i = 0; i < directiveBindings.length; ++i) {
var directive = directiveBindings[i];
if (_directiveExportAs(directive) == exportAs) {
if (isPresent(matchedDirective)) {
throw new BaseException(`More than one directive have exportAs = '${exportAs}'. Directives: [${matchedDirective.displayName}, ${directive.displayName}]`);
}
matchedDirectiveIndex = i;
matchedDirective = directive;
}
}
if (isBlank(matchedDirective) && exportAs !== "$implicit") {
throw new BaseException(`Cannot find directive with exportAs = '${exportAs}'`);
}
return matchedDirectiveIndex;
}
function _directiveExportAs(directive):string {
var directiveExportAs = directive.metadata.exportAs;
if (isBlank(directiveExportAs) && directive.metadata.type === renderApi.DirectiveMetadata.COMPONENT_TYPE) {
return "$implicit";
} else {
return directiveExportAs;
}
}
function _bindDirectiveEvents(protoView, elementBinders: List<renderApi.ElementBinder>) {
for (var boundElementIndex = 0; boundElementIndex < elementBinders.length; ++boundElementIndex) {
var dirs = elementBinders[boundElementIndex].directives;

View File

@ -183,9 +183,12 @@ export class AppProtoView {
bindElement(parent: ElementBinder, distanceToParent: int,
protoElementInjector: ProtoElementInjector,
directiveVariableBindings: Map<string, number>,
componentDirective: DirectiveBinding = null): ElementBinder {
var elBinder = new ElementBinder(this.elementBinders.length, parent, distanceToParent,
protoElementInjector, componentDirective);
var elBinder =
new ElementBinder(this.elementBinders.length, parent, distanceToParent,
protoElementInjector, directiveVariableBindings, componentDirective);
ListWrapper.push(this.elementBinders, elBinder);
return elBinder;
}

View File

@ -206,20 +206,22 @@ export class AppViewManagerUtils {
var binders = view.proto.elementBinders;
for (var i = 0; i < binders.length; ++i) {
var binder = binders[i];
var elementInjector = view.elementInjectors[i];
if (isPresent(elementInjector)) {
elementInjector.hydrate(appInjector, hostElementInjector, view.preBuiltObjects[i]);
this._setUpEventEmitters(view, elementInjector, i);
this._setUpHostActions(view, elementInjector, i);
// The exporting of $implicit is a special case. Since multiple elements will all export
// the different values as $implicit, directly assign $implicit bindings to the variable
// name.
var exportImplicitName = elementInjector.getExportImplicitName();
if (elementInjector.isExportingComponent()) {
view.locals.set(exportImplicitName, elementInjector.getComponent());
} else if (elementInjector.isExportingElement()) {
view.locals.set(exportImplicitName, elementInjector.getElementRef().domElement);
if (isPresent(binder.directiveVariableBindings)) {
MapWrapper.forEach(binder.directiveVariableBindings, (directiveIndex, name) => {
if (isBlank(directiveIndex)) {
view.locals.set(name, elementInjector.getElementRef().domElement);
} else {
view.locals.set(name, elementInjector.getDirectiveAtIndex(directiveIndex));
}
});
}
}
}