feat(ViewSplitter): Change template shorthand syntax from '!' to '*'
fixes #717 Closes #727
This commit is contained in:
parent
b1fc3e87c6
commit
69e02ee76f
|
@ -9,8 +9,6 @@ import {CompileElement} from './compile_element';
|
||||||
import {CompileControl} from './compile_control';
|
import {CompileControl} from './compile_control';
|
||||||
import {StringWrapper} from 'angular2/src/facade/lang';
|
import {StringWrapper} from 'angular2/src/facade/lang';
|
||||||
|
|
||||||
import {$BANG} from 'angular2/src/change_detection/parser/lexer';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Splits views at `<template>` elements or elements with `template` attribute:
|
* Splits views at `<template>` elements or elements with `template` attribute:
|
||||||
* For `<template>` elements:
|
* For `<template>` elements:
|
||||||
|
@ -59,9 +57,9 @@ export class ViewSplitter extends CompileStep {
|
||||||
var templateBindings = MapWrapper.get(attrs, 'template');
|
var templateBindings = MapWrapper.get(attrs, 'template');
|
||||||
var hasTemplateBinding = isPresent(templateBindings);
|
var hasTemplateBinding = isPresent(templateBindings);
|
||||||
|
|
||||||
// look for template shortcuts such as !if="condition" and treat them as template="if condition"
|
// look for template shortcuts such as *if="condition" and treat them as template="if condition"
|
||||||
MapWrapper.forEach(attrs, (attrValue, attrName) => {
|
MapWrapper.forEach(attrs, (attrValue, attrName) => {
|
||||||
if (StringWrapper.charCodeAt(attrName, 0) == $BANG) {
|
if (StringWrapper.startsWith(attrName, '*')) {
|
||||||
var key = StringWrapper.substring(attrName, 1); // remove the bang
|
var key = StringWrapper.substring(attrName, 1); // remove the bang
|
||||||
if (hasTemplateBinding) {
|
if (hasTemplateBinding) {
|
||||||
// 2nd template binding detected
|
// 2nd template binding detected
|
||||||
|
|
|
@ -99,26 +99,26 @@ export function main() {
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('elements with !directive_name attribute', () => {
|
describe('elements with *directive_name attribute', () => {
|
||||||
|
|
||||||
it('should replace the element with an empty <template> element', () => {
|
it('should replace the element with an empty <template> element', () => {
|
||||||
var rootElement = el('<div><span !if></span></div>');
|
var rootElement = el('<div><span *if></span></div>');
|
||||||
var originalChild = rootElement.childNodes[0];
|
var originalChild = rootElement.childNodes[0];
|
||||||
var results = createPipeline().process(rootElement);
|
var results = createPipeline().process(rootElement);
|
||||||
expect(results[0].element).toBe(rootElement);
|
expect(results[0].element).toBe(rootElement);
|
||||||
expect(DOM.getOuterHTML(results[0].element)).toEqual('<div><template if=""></template></div>');
|
expect(DOM.getOuterHTML(results[0].element)).toEqual('<div><template if=""></template></div>');
|
||||||
expect(DOM.getOuterHTML(results[2].element)).toEqual('<span !if=""></span>')
|
expect(DOM.getOuterHTML(results[2].element)).toEqual('<span *if=""></span>')
|
||||||
expect(results[2].element).toBe(originalChild);
|
expect(results[2].element).toBe(originalChild);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should mark the element as viewRoot', () => {
|
it('should mark the element as viewRoot', () => {
|
||||||
var rootElement = el('<div><div !foo="bar"></div></div>');
|
var rootElement = el('<div><div *foo="bar"></div></div>');
|
||||||
var results = createPipeline().process(rootElement);
|
var results = createPipeline().process(rootElement);
|
||||||
expect(results[2].isViewRoot).toBe(true);
|
expect(results[2].isViewRoot).toBe(true);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should work with top-level template node', () => {
|
it('should work with top-level template node', () => {
|
||||||
var rootElement = DOM.createTemplate('<div !foo>x</div>');
|
var rootElement = DOM.createTemplate('<div *foo>x</div>');
|
||||||
var originalChild = rootElement.content.childNodes[0];
|
var originalChild = rootElement.content.childNodes[0];
|
||||||
var results = createPipeline().process(rootElement);
|
var results = createPipeline().process(rootElement);
|
||||||
|
|
||||||
|
@ -130,19 +130,19 @@ export function main() {
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should add property bindings from the template attribute', () => {
|
it('should add property bindings from the template attribute', () => {
|
||||||
var rootElement = el('<div><div !prop="expr"></div></div>');
|
var rootElement = el('<div><div *prop="expr"></div></div>');
|
||||||
var results = createPipeline().process(rootElement);
|
var results = createPipeline().process(rootElement);
|
||||||
expect(MapWrapper.get(results[1].propertyBindings, 'prop').source).toEqual('expr');
|
expect(MapWrapper.get(results[1].propertyBindings, 'prop').source).toEqual('expr');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should add variable mappings from the template attribute', () => {
|
it('should add variable mappings from the template attribute', () => {
|
||||||
var rootElement = el('<div><div !foreach="var varName=mapName"></div></div>');
|
var rootElement = el('<div><div *foreach="var varName=mapName"></div></div>');
|
||||||
var results = createPipeline().process(rootElement);
|
var results = createPipeline().process(rootElement);
|
||||||
expect(results[1].variableBindings).toEqual(MapWrapper.createFromStringMap({'mapName': 'varName'}));
|
expect(results[1].variableBindings).toEqual(MapWrapper.createFromStringMap({'mapName': 'varName'}));
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should add entries without value as attribute to the element', () => {
|
it('should add entries without value as attribute to the element', () => {
|
||||||
var rootElement = el('<div><div !varname></div></div>');
|
var rootElement = el('<div><div *varname></div></div>');
|
||||||
var results = createPipeline().process(rootElement);
|
var results = createPipeline().process(rootElement);
|
||||||
expect(results[1].attrs()).toEqual(MapWrapper.createFromStringMap({'varname': ''}));
|
expect(results[1].attrs()).toEqual(MapWrapper.createFromStringMap({'varname': ''}));
|
||||||
expect(results[1].propertyBindings).toBe(null);
|
expect(results[1].propertyBindings).toBe(null);
|
||||||
|
@ -150,7 +150,7 @@ export function main() {
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should iterate properly after a template dom modification', () => {
|
it('should iterate properly after a template dom modification', () => {
|
||||||
var rootElement = el('<div><div !foo></div><after></after></div>');
|
var rootElement = el('<div><div *foo></div><after></after></div>');
|
||||||
var results = createPipeline().process(rootElement);
|
var results = createPipeline().process(rootElement);
|
||||||
// 1 root + 2 initial + 1 generated template elements
|
// 1 root + 2 initial + 1 generated template elements
|
||||||
expect(results.length).toEqual(4);
|
expect(results.length).toEqual(4);
|
||||||
|
@ -158,14 +158,14 @@ export function main() {
|
||||||
|
|
||||||
it('should not allow multiple template directives on the same element', () => {
|
it('should not allow multiple template directives on the same element', () => {
|
||||||
expect( () => {
|
expect( () => {
|
||||||
var rootElement = el('<div><div !foo !bar="blah"></div></div>');
|
var rootElement = el('<div><div *foo *bar="blah"></div></div>');
|
||||||
createPipeline().process(rootElement);
|
createPipeline().process(rootElement);
|
||||||
}).toThrowError('Only one template directive per element is allowed: foo and bar cannot be used simultaneously!');
|
}).toThrowError('Only one template directive per element is allowed: foo and bar cannot be used simultaneously!');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should not allow template and bang directives on the same element', () => {
|
it('should not allow template and bang directives on the same element', () => {
|
||||||
expect( () => {
|
expect( () => {
|
||||||
var rootElement = el('<div><div !foo template="blah"></div></div>');
|
var rootElement = el('<div><div *foo template="blah"></div></div>');
|
||||||
createPipeline().process(rootElement);
|
createPipeline().process(rootElement);
|
||||||
}).toThrowError('Only one template directive per element is allowed: blah and foo cannot be used simultaneously!');
|
}).toThrowError('Only one template directive per element is allowed: blah and foo cannot be used simultaneously!');
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue