fix(ElementBinderBuilder): properly bind to web component properties

Fixes #776

Closes #1024
This commit is contained in:
Pawel Kozlowski 2015-03-20 18:44:51 +01:00
parent 81f3f32217
commit 0fb9f3bd6c
5 changed files with 29 additions and 19 deletions

View File

@ -93,17 +93,6 @@ function styleSetterFactory(styleName:string, stylesuffix:string) {
return setterFn; return setterFn;
} }
const ROLE_ATTR = 'role';
function roleSetter(element, value) {
if (isString(value)) {
DOM.setAttribute(element, ROLE_ATTR, value);
} else {
DOM.removeAttribute(element, ROLE_ATTR);
if (isPresent(value)) {
throw new BaseException("Invalid role attribute, only string values are allowed, got '" + stringify(value) + "'");
}
}
}
/** /**
* Creates the ElementBinders and adds watches to the * Creates the ElementBinders and adds watches to the
@ -199,19 +188,19 @@ export class ElementBinderBuilder extends CompileStep {
styleParts = StringWrapper.split(property, DOT_REGEXP); styleParts = StringWrapper.split(property, DOT_REGEXP);
styleSuffix = styleParts.length > 2 ? ListWrapper.get(styleParts, 2) : ''; styleSuffix = styleParts.length > 2 ? ListWrapper.get(styleParts, 2) : '';
setterFn = styleSetterFactory(ListWrapper.get(styleParts, 1), styleSuffix); setterFn = styleSetterFactory(ListWrapper.get(styleParts, 1), styleSuffix);
} else if (StringWrapper.equals(property, 'innerHtml')) {
setterFn = (element, value) => DOM.setInnerHTML(element, value);
} else { } else {
property = this._resolvePropertyName(property); property = this._resolvePropertyName(property);
//TODO(pk): special casing innerHtml, see: https://github.com/angular/angular/issues/789 var propertySetterFn = reflector.setter(property);
if (StringWrapper.equals(property, 'innerHTML')) { setterFn = function(receiver, value) {
setterFn = (element, value) => DOM.setInnerHTML(element, value); if (DOM.hasProperty(receiver, property)) {
} else if (DOM.hasProperty(compileElement.element, property) || StringWrapper.equals(property, 'innerHtml')) { return propertySetterFn(receiver, value);
setterFn = reflector.setter(property); }
} }
} }
if (isPresent(setterFn)) {
protoView.bindElementProperty(expression.ast, property, setterFn); protoView.bindElementProperty(expression.ast, property, setterFn);
}
}); });
} }

View File

@ -186,6 +186,20 @@ export function main() {
}); });
})); }));
it('should ignore bindings to unknown properties', inject([AsyncTestCompleter], (async) => {
tplResolver.setTemplate(MyComp, new Template({inline: '<div unknown="{{ctxProp}}"></div>'}));
compiler.compile(MyComp).then((pv) => {
createView(pv);
ctx.ctxProp = 'Some value';
cd.detectChanges();
expect(DOM.hasProperty(view.nodes[0], 'unknown')).toBeFalsy();
async.done();
});
}));
it('should consume directive watch expression change.', inject([AsyncTestCompleter], (async) => { it('should consume directive watch expression change.', inject([AsyncTestCompleter], (async) => {
var tpl = var tpl =
'<div>' + '<div>' +

View File

@ -78,6 +78,9 @@ function setupReflector() {
"value0": (a,v) => a.value0 = v, "value1": (a,v) => a.value1 = v, "value0": (a,v) => a.value0 = v, "value1": (a,v) => a.value1 = v,
"value2": (a,v) => a.value2 = v, "value3": (a,v) => a.value3 = v, "value4": (a,v) => a.value4 = v, "value2": (a,v) => a.value2 = v, "value3": (a,v) => a.value3 = v, "value4": (a,v) => a.value4 = v,
"attr0": (a,v) => a.attr0 = v, "attr1": (a,v) => a.attr1 = v,
"attr2": (a,v) => a.attr2 = v, "attr3": (a,v) => a.attr3 = v, "attr4": (a,v) => a.attr4 = v,
"prop": (a,v) => a.prop = v "prop": (a,v) => a.prop = v
}); });
} }

View File

@ -139,6 +139,9 @@ export function setupReflector() {
'aatStatusWidth': (o, v) => o.aatStatusWidth = v, 'aatStatusWidth': (o, v) => o.aatStatusWidth = v,
'bundles': (o, v) => o.bundles = v, 'bundles': (o, v) => o.bundles = v,
'bundlesWidth': (o, v) => o.bundlesWidth = v, 'bundlesWidth': (o, v) => o.bundlesWidth = v,
'if': (o, v) => {},
'of': (o, v) => {},
'cellWidth': (o, v) => o.cellWidth = v,
evt: (o, v) => null, evt: (o, v) => null,
'style': (o, m) => { 'style': (o, m) => {
//if (isBlank(m)) return; //if (isBlank(m)) return;

View File

@ -206,6 +206,7 @@ function setupReflector() {
'initData': (a,v) => a.initData = v, 'initData': (a,v) => a.initData = v,
'data': (a,v) => a.data = v, 'data': (a,v) => a.data = v,
'condition': (a,v) => a.condition = v, 'condition': (a,v) => a.condition = v,
'if': (a,v) => a['if'] = v,
}); });
} }