iSharkFly-Docs/angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(render): use RenderElementRef in all renderer methods

Browse Source 
BREAKING CHANGES:
- Almost all methods in `Renderer` now take a `RenderElementRef` instead
  of a `ViewRef` + `boundElementIndex`.
- These methods can be called with the `ElementRef` from the app side
  directly.

Closes #2706
Related to #2476
This commit is contained in:
Tobias Bosch
2015-06-23 11:21:56 -07:00
parent 2c3c235969
commit ba9fecd068
13 changed files with 139 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files
modules/angular2/test/render/dom/dom_renderer_integration_spec.ts
+8 -8
View File
@@ -16,7 +16,7 @@ import {
import {MapWrapper} from 'angular2/src/facade/collection';
import {DOM} from 'angular2/src/dom/dom_adapter';
import {DomTestbed, TestView} from './dom_testbed';
import {DomTestbed, TestView, elRef} from './dom_testbed';
import {ViewDefinition, DirectiveMetadata, RenderViewRef} from 'angular2/src/render/api';
@@ -106,20 +106,20 @@ export function main() {
var cmpView = tb.createComponentView(rootView.viewRef, 0, protoViewDtos[1]);
var el = DOM.childNodes(tb.rootEl)[0];
tb.renderer.setElementProperty(cmpView.viewRef, 0, 'value', 'hello');
tb.renderer.setElementProperty(elRef(cmpView.viewRef, 0), 'value', 'hello');
expect(el.value).toEqual('hello');
tb.renderer.setElementClass(cmpView.viewRef, 0, 'a', true);
tb.renderer.setElementClass(elRef(cmpView.viewRef, 0), 'a', true);
expect(DOM.childNodes(tb.rootEl)[0].value).toEqual('hello');
tb.renderer.setElementClass(cmpView.viewRef, 0, 'a', false);
tb.renderer.setElementClass(elRef(cmpView.viewRef, 0), 'a', false);
expect(DOM.hasClass(el, 'a')).toBe(false);
tb.renderer.setElementStyle(cmpView.viewRef, 0, 'width', '10px');
tb.renderer.setElementStyle(elRef(cmpView.viewRef, 0), 'width', '10px');
expect(DOM.getStyle(el, 'width')).toEqual('10px');
tb.renderer.setElementStyle(cmpView.viewRef, 0, 'width', null);
tb.renderer.setElementStyle(elRef(cmpView.viewRef, 0), 'width', null);
expect(DOM.getStyle(el, 'width')).toEqual('');
tb.renderer.setElementAttribute(cmpView.viewRef, 0, 'someAttr', 'someValue');
tb.renderer.setElementAttribute(elRef(cmpView.viewRef, 0), 'someAttr', 'someValue');
expect(DOM.getAttribute(el, 'some-attr')).toEqual('someValue');
async.done();
@@ -141,7 +141,7 @@ export function main() {
var views = tb.createRootViews(protoViewDtos);
var componentView = views[1];
tb.renderer.invokeElementMethod(componentView.viewRef, 0, 'setAttribute',
tb.renderer.invokeElementMethod(elRef(componentView.viewRef, 0), 'setAttribute',
['a', 'b']);
expect(DOM.getAttribute(DOM.childNodes(tb.rootEl)[0], 'a')).toEqual('b');
modules/angular2/test/render/dom/dom_testbed.ts
+13 -5
View File
@@ -11,7 +11,8 @@ import {
ProtoViewDto,
ViewDefinition,
EventDispatcher,
DirectiveMetadata
DirectiveMetadata,
RenderElementRef
} from 'angular2/src/render/api';
import {resolveInternalDomView} from 'angular2/src/render/dom/view/view';
import {el, dispatchEvent} from 'angular2/test_lib';
@@ -28,6 +29,13 @@ export class TestView {
}
}
export function elRef(renderView: RenderViewRef, boundElementIndex: number) {
return new TestRenderElementRef(renderView, boundElementIndex);
}
class TestRenderElementRef implements RenderElementRef {
constructor(public renderView: RenderViewRef, public boundElementIndex: number) {}
}
class LoggingEventDispatcher implements EventDispatcher {
log: List<List<any>>;
@@ -85,7 +93,7 @@ export class DomTestbed {
createComponentView(parentViewRef: RenderViewRef, boundElementIndex: number,
componentProtoView: ProtoViewDto): TestView {
var componentViewRef = this.renderer.createView(componentProtoView.render);
this.renderer.attachComponentView(parentViewRef, boundElementIndex, componentViewRef);
this.renderer.attachComponentView(elRef(parentViewRef, boundElementIndex), componentViewRef);
this.renderer.hydrateView(componentViewRef);
return this._createTestView(componentViewRef);
}
@@ -104,13 +112,13 @@ export class DomTestbed {
destroyComponentView(parentViewRef: RenderViewRef, boundElementIndex: number,
componentView: RenderViewRef) {
this.renderer.dehydrateView(componentView);
this.renderer.detachComponentView(parentViewRef, boundElementIndex, componentView);
this.renderer.detachComponentView(elRef(parentViewRef, boundElementIndex), componentView);
}
createViewInContainer(parentViewRef: RenderViewRef, boundElementIndex: number, atIndex: number,
protoView: ProtoViewDto): TestView {
var viewRef = this.renderer.createView(protoView.render);
this.renderer.attachViewInContainer(parentViewRef, boundElementIndex, atIndex, viewRef);
this.renderer.attachViewInContainer(elRef(parentViewRef, boundElementIndex), atIndex, viewRef);
this.renderer.hydrateView(viewRef);
return this._createTestView(viewRef);
}
@@ -118,7 +126,7 @@ export class DomTestbed {
destroyViewInContainer(parentViewRef: RenderViewRef, boundElementIndex: number, atIndex: number,
viewRef: RenderViewRef) {
this.renderer.dehydrateView(viewRef);
this.renderer.detachViewInContainer(parentViewRef, boundElementIndex, atIndex, viewRef);
this.renderer.detachViewInContainer(elRef(parentViewRef, boundElementIndex), atIndex, viewRef);
this.renderer.destroyView(viewRef);
}
modules/angular2/test/render/dom/shadow_dom_emulation_integration_spec.ts
+9 -5
View File
@@ -32,7 +32,7 @@ import {
import {StyleUrlResolver} from 'angular2/src/render/dom/shadow_dom/style_url_resolver';
import {StyleInliner} from 'angular2/src/render/dom/shadow_dom/style_inliner';
import {DomTestbed} from './dom_testbed';
import {DomTestbed, elRef} from './dom_testbed';
export function main() {
describe('ShadowDom integration tests', function() {
@@ -425,17 +425,21 @@ export function main() {
expect(tb.rootEl).toHaveText('(TAB(0))');
tb.renderer.dehydrateView(tabChildView.viewRef);
tb.renderer.detachViewInContainer(tab1View.viewRef, 0, 0, tabChildView.viewRef);
tb.renderer.detachViewInContainer(elRef(tab1View.viewRef, 0), 0,
tabChildView.viewRef);
tb.renderer.attachViewInContainer(tab2View.viewRef, 0, 0, tabChildView.viewRef);
tb.renderer.attachViewInContainer(elRef(tab2View.viewRef, 0), 0,
tabChildView.viewRef);
tb.renderer.hydrateView(tabChildView.viewRef);
expect(tb.rootEl).toHaveText('(TAB(1))');
tb.renderer.dehydrateView(tabChildView.viewRef);
tb.renderer.detachViewInContainer(tab2View.viewRef, 0, 0, tabChildView.viewRef);
tb.renderer.detachViewInContainer(elRef(tab2View.viewRef, 0), 0,
tabChildView.viewRef);
tb.renderer.attachViewInContainer(tab3View.viewRef, 0, 0, tabChildView.viewRef);
tb.renderer.attachViewInContainer(elRef(tab3View.viewRef, 0), 0,
tabChildView.viewRef);
tb.renderer.hydrateView(tabChildView.viewRef);
expect(tb.rootEl).toHaveText('(TAB(2))');