Browse Source

Template#apply() takes over View#applyTemplateToElement().

Aleksander Nowodzinski 9 years ago
parent
commit
d6ed73af4f

+ 1 - 1
packages/ckeditor5-ui/src/editableui/editableuiview.js

@@ -53,7 +53,7 @@ export default class EditableUIView extends View {
 	 */
 	init() {
 		if ( this.editableElement ) {
-			this.applyTemplateToElement( this.editableElement, this.template.definition );
+			this.template.apply( this.editableElement );
 		} else {
 			this.editableElement = this.element;
 		}

+ 3 - 2
packages/ckeditor5-ui/src/editorui/editoruiview.js

@@ -6,6 +6,7 @@
 'use strict';
 
 import View from '../view.js';
+import Template from '../template.js';
 
 /**
  * Base class for the editor main views.
@@ -47,11 +48,11 @@ export default class EditorUIView extends View {
 		const bodyElement = document.createElement( 'div' );
 		document.body.appendChild( bodyElement );
 
-		this.applyTemplateToElement( bodyElement, {
+		new Template( {
 			attributes: {
 				class: 'ck-body ck-reset-all'
 			}
-		} );
+		} ).apply( bodyElement );
 
 		this._bodyRegionContainer = bodyElement;
 

+ 19 - 2
packages/ckeditor5-ui/src/template.js

@@ -54,10 +54,27 @@ export default class Template {
 	 * Applies template {@link ui.Template#def} to existing DOM tree.
 	 *
 	 * **Note:** No new DOM nodes (elements, text nodes) will be created.
+	 *		const element = document.createElement( 'div' );
+	 *		const bind = Template.bind( observableInstance, emitterInstance );
 	 *
-	 * @see ui.Template#render
-	 * @see ui.View#applyTemplateToElement.
+	 *		const template = new Template( {
+	 *			attrs: {
+	 *				id: 'first-div',
+	 *				class: bind.to( 'divClass' )
+	 *			},
+	 *			on: {
+	 *				click: bind( 'elementClicked' ) // Will be fired by the observableInstance.
+	 *			}
+	 *			children: [
+	 *				'Div text.'
+	 *			]
+	 *		} );
+	 *
+	 *		template.apply( element );
 	 *
+	 *		element.outerHTML == "<div id="first-div" class="my-div">Div text.</div>"
+	 *
+	 * @see ui.Template#render
 	 * @param {Node} element Root element for template to apply.
 	 */
 	apply( node ) {

+ 0 - 32
packages/ckeditor5-ui/src/view.js

@@ -197,38 +197,6 @@ export default class View {
 	}
 
 	/**
-	 * Applies template to existing DOM element in the context of a View.
-	 *
-	 *		const element = document.createElement( 'div' );
-	 *		const model = new Model( { divClass: 'my-div' } );
-	 *		const view = new View( model );
-	 *		const bind = Template.bind( model, view )
-	 *
-	 *		view.applyTemplateToElement( element, {
-	 *			attrs: {
-	 *				id: 'first-div',
-	 *				class: bind.to( 'divClass' )
-	 *			},
-	 *			on: {
-	 *				click: 'elementClicked' // Will be fired by the View instance.
-	 *			}
-	 *			children: [
-	 *				'Div text.'
-	 *			]
-	 *		} );
-	 *
-	 *		element.outerHTML == "<div id="first-div" class="my-div">Div text.</div>"
-	 *
-	 * See: {@link ui.Template#apply}.
-	 *
-	 * @param {DOMElement} element DOM Element to initialize.
-	 * @param {ui.TemplateDefinition} def Template definition to be applied.
-	 */
-	applyTemplateToElement( element, def ) {
-		new Template( def ).apply( element );
-	}
-
-	/**
 	 * Destroys the view instance. The process includes:
 	 *
 	 * 1. Removal of child views from {@link ui.View#regions}.

+ 95 - 0
packages/ckeditor5-ui/tests/template.js

@@ -294,9 +294,19 @@ describe( 'Template', () => {
 	} );
 
 	describe( 'apply', () => {
+		let observable, domEmitter, bind;
+
 		beforeEach( () => {
 			el = document.createElement( 'div' );
 			text = document.createTextNode( '' );
+
+			observable = new Model( {
+				foo: 'bar',
+				baz: 'qux'
+			} );
+
+			domEmitter = Object.create( DOMEmitterMixin );
+			bind = Template.bind( observable, domEmitter );
 		} );
 
 		it( 'throws when wrong template definition', () => {
@@ -399,6 +409,91 @@ describe( 'Template', () => {
 
 			expect( el.outerHTML ).to.be.equal( '<div class="parent">Children: <span class="child"></span></div>' );
 		} );
+
+		it( 'should work for deep DOM structure', () => {
+			const childA = document.createElement( 'a' );
+			const childB = document.createElement( 'b' );
+
+			childA.textContent = 'anchor';
+			childB.textContent = 'bold';
+
+			el.appendChild( childA );
+			el.appendChild( childB );
+
+			expect( el.outerHTML ).to.equal( '<div><a>anchor</a><b>bold</b></div>' );
+
+			const spy1 = testUtils.sinon.spy();
+			const spy2 = testUtils.sinon.spy();
+			const spy3 = testUtils.sinon.spy();
+
+			observable.on( 'ku', spy1 );
+			observable.on( 'kd', spy2 );
+			observable.on( 'mo', spy3 );
+
+			new Template( {
+				tag: 'div',
+				children: [
+					{
+						tag: 'a',
+						on: {
+							keyup: bind.to( 'ku' )
+						},
+						attributes: {
+							class: bind.to( 'foo', val => 'applied-A-' + val ),
+							id: 'applied-A'
+						},
+						children: [ 'Text applied to childA.' ]
+					},
+					{
+						tag: 'b',
+						on: {
+							keydown: bind.to( 'kd' )
+						},
+						attributes: {
+							class: bind.to( 'baz', val => 'applied-B-' + val ),
+							id: 'applied-B'
+						},
+						children: [ 'Text applied to childB.' ]
+					},
+					'Text which is not to be applied because it does NOT exist in original element.'
+				],
+				on: {
+					'mouseover@a': bind.to( 'mo' )
+				},
+				attributes: {
+					id: bind.to( 'foo', val => val.toUpperCase() ),
+					class: bind.to( 'baz', val => 'applied-parent-' + val )
+				}
+			} ).apply( el );
+
+			expect( el.outerHTML ).to.equal( '<div id="BAR" class="applied-parent-qux">' +
+				'<a class="applied-A-bar" id="applied-A">Text applied to childA.</a>' +
+				'<b class="applied-B-qux" id="applied-B">Text applied to childB.</b>' +
+			'</div>' );
+
+			observable.foo = 'updated';
+
+			expect( el.outerHTML ).to.equal( '<div id="UPDATED" class="applied-parent-qux">' +
+				'<a class="applied-A-updated" id="applied-A">Text applied to childA.</a>' +
+				'<b class="applied-B-qux" id="applied-B">Text applied to childB.</b>' +
+			'</div>' );
+
+			document.body.appendChild( el );
+
+			// Test "mouseover@a".
+			dispatchEvent( el, 'mouseover' );
+			dispatchEvent( childA, 'mouseover' );
+
+			// Test "keyup".
+			dispatchEvent( childA, 'keyup' );
+
+			// Test "keydown".
+			dispatchEvent( childB, 'keydown' );
+
+			sinon.assert.calledOnce( spy1 );
+			sinon.assert.calledOnce( spy2 );
+			sinon.assert.calledOnce( spy3 );
+		} );
 	} );
 
 	describe( 'bind', () => {

+ 0 - 103
packages/ckeditor5-ui/tests/view.js

@@ -294,99 +294,6 @@ describe( 'View', () => {
 			} ).to.not.throw();
 		} );
 	} );
-
-	describe( 'applyTemplateToElement', () => {
-		beforeEach( () => {
-			setTestViewClass();
-			setTestViewInstance( { a: 'foo', b: 42 } );
-		} );
-
-		it( 'should work for deep DOM structure', () => {
-			const el = document.createElement( 'div' );
-			const childA = document.createElement( 'a' );
-			const childB = document.createElement( 'b' );
-
-			childA.textContent = 'anchor';
-			childB.textContent = 'bold';
-
-			el.appendChild( childA );
-			el.appendChild( childB );
-
-			expect( el.outerHTML ).to.equal( '<div><a>anchor</a><b>bold</b></div>' );
-
-			const spy1 = testUtils.sinon.spy();
-			const spy2 = testUtils.sinon.spy();
-			const spy3 = testUtils.sinon.spy();
-
-			view.model.on( 'ku', spy1 );
-			view.model.on( 'kd', spy2 );
-			view.model.on( 'mo', spy3 );
-
-			view.applyTemplateToElement( el, {
-				tag: 'div',
-				children: [
-					{
-						tag: 'a',
-						on: {
-							keyup: view.bind.to( 'ku' )
-						},
-						attributes: {
-							class: view.bind.to( 'b', b => 'applied-A-' + b ),
-							id: 'applied-A'
-						},
-						children: [ 'Text applied to childA.' ]
-					},
-					{
-						tag: 'b',
-						on: {
-							keydown: view.bind.to( 'kd' )
-						},
-						attributes: {
-							class: view.bind.to( 'b', b => 'applied-B-' + b ),
-							id: 'applied-B'
-						},
-						children: [ 'Text applied to childB.' ]
-					},
-					'Text which is not to be applied because it does NOT exist in original element.'
-				],
-				on: {
-					'mouseover@a': view.bind.to( 'mo' )
-				},
-				attributes: {
-					id: view.bind.to( 'a', a => a.toUpperCase() ),
-					class: view.bind.to( 'b', b => 'applied-parent-' + b )
-				}
-			} );
-
-			expect( el.outerHTML ).to.equal( '<div id="FOO" class="applied-parent-42">' +
-				'<a class="applied-A-42" id="applied-A">Text applied to childA.</a>' +
-				'<b class="applied-B-42" id="applied-B">Text applied to childB.</b>' +
-			'</div>' );
-
-			view.model.b = 16;
-
-			expect( el.outerHTML ).to.equal( '<div id="FOO" class="applied-parent-16">' +
-				'<a class="applied-A-16" id="applied-A">Text applied to childA.</a>' +
-				'<b class="applied-B-16" id="applied-B">Text applied to childB.</b>' +
-			'</div>' );
-
-			document.body.appendChild( el );
-
-			// Test "mouseover@a".
-			dispatchEvent( el, 'mouseover' );
-			dispatchEvent( childA, 'mouseover' );
-
-			// Test "keyup".
-			dispatchEvent( childA, 'keyup' );
-
-			// Test "keydown".
-			dispatchEvent( childB, 'keydown' );
-
-			sinon.assert.calledOnce( spy1 );
-			sinon.assert.calledOnce( spy2 );
-			sinon.assert.calledOnce( spy3 );
-		} );
-	} );
 } );
 
 function createViewInstanceWithTemplate() {
@@ -417,13 +324,3 @@ function setTestViewInstance( model ) {
 		document.body.appendChild( view.element );
 	}
 }
-
-function dispatchEvent( el, domEvtName ) {
-	if ( !el.parentNode ) {
-		throw new Error( 'To dispatch an event, element must be in DOM. Otherwise #target is null.' );
-	}
-
-	el.dispatchEvent( new Event( domEvtName, {
-		bubbles: true
-	} ) );
-}