瀏覽代碼

Don't append region to the view when added. Allowed binding between element's text and model property.

Aleksander Nowodzinski 10 年之前
父節點
當前提交
266653d59d
共有 2 個文件被更改,包括 34 次插入22 次删除
  1. 20 12
      packages/ckeditor5-ui/src/ui/view.js
  2. 14 10
      packages/ckeditor5-ui/tests/ui/view.js

+ 20 - 12
packages/ckeditor5-ui/src/ui/view.js

@@ -27,8 +27,6 @@ CKEDITOR.define( [ 'Collection', 'Model' ], function( Collection, Model ) {
 			 * Regions which belong to this view.
 			 */
 			this.regions = new Collection();
-
-			this.regions.on( 'add', ( evt, region ) => this.el.appendChild( region.el ) );
 		}
 
 		/**
@@ -53,20 +51,18 @@ CKEDITOR.define( [ 'Collection', 'Model' ], function( Collection, Model ) {
 		 * @param {Function} [callback] Callback function executed on property change in model.
 		 * @constructor
 		 */
-		bind( model, property, callback ) {
-			return function( el, attr ) {
-				// TODO: Use ES6 default arguments syntax.
-				var changeCallback = callback || setAttribute;
+		bindModel( property, callback ) {
+			var model = this.model;
 
-				function setAttribute( el, value ) {
-					el.setAttribute( attr, value );
-				}
+			return function( el, updater ) {
+				// TODO: Use ES6 default arguments syntax.
+				var changeCallback = callback || updater;
 
 				function executeCallback( el, value ) {
 					var result = changeCallback( el, value );
 
 					if ( typeof result != 'undefined' ) {
-						setAttribute( el, result );
+						updater( el, result );
 					}
 				}
 
@@ -96,9 +92,21 @@ CKEDITOR.define( [ 'Collection', 'Model' ], function( Collection, Model ) {
 			var attr;
 			var value;
 
+			var textUpdater = () => {
+				return ( el, value ) => el.innerHTML = value;
+			};
+
+			var attributeUpdater = ( attr ) => {
+				return ( el, value ) => el.setAttribute( attr, value );
+			};
+
 			// Set the text first.
 			if ( template.text ) {
-				el.innerHTML = template.text;
+				if ( typeof template.text == 'function' ) {
+					template.text( el, textUpdater() );
+				} else {
+					el.innerHTML = template.text;
+				}
 			}
 
 			// Set attributes.
@@ -107,7 +115,7 @@ CKEDITOR.define( [ 'Collection', 'Model' ], function( Collection, Model ) {
 
 				// Attribute bound directly to the model.
 				if ( typeof value == 'function' ) {
-					value( el, attr );
+					value( el, attributeUpdater( attr ) );
 				}
 
 				// Explicit attribute definition (string).

+ 14 - 10
packages/ckeditor5-ui/tests/ui/view.js

@@ -49,15 +49,15 @@ describe( 'rich view', function() {
 						tag: 'p',
 						attributes: {
 							'class': 'a',
-							x: this.bind( this.model, 'plain' )
+							x: this.bindModel( 'plain' )
 						},
-						text: 'b',
+						text: this.bindModel( 'text' ),
 						children: [
 							{
 								tag: 'b',
 								text: 'c',
 								attributes: {
-									y: this.bind( this.model, 'augmented', function( el, value ) {
+									y: this.bindModel( 'augmented', function( el, value ) {
 										return ( value > 0 ? 'positive' : 'negative' );
 									} )
 								}
@@ -66,7 +66,7 @@ describe( 'rich view', function() {
 								tag: 'i',
 								text: 'd',
 								attributes: {
-									z: this.bind( this.model, 'custom', function( el, value ) {
+									z: this.bindModel( 'custom', function( el, value ) {
 										el.innerHTML = value;
 
 										if ( value == 'foo' ) {
@@ -83,7 +83,8 @@ describe( 'rich view', function() {
 		view = new Component( {
 			plain: 'z',
 			augmented: 7,
-			custom: 'moo'
+			custom: 'moo',
+			text: 'bar'
 		} );
 	} );
 
@@ -91,21 +92,24 @@ describe( 'rich view', function() {
 		expect( view.el ).to.be.instanceof( HTMLElement );
 		expect( view.el.parentNode ).to.be.null();
 
-		expect( getOuterHtml( view.el ) ).to.be.equal( '<p class="a" x="z">b<b y="positive">c</b><i>moo</i></p>' );
+		expect( getOuterHtml( view.el ) ).to.be.equal( '<p class="a" x="z">bar<b y="positive">c</b><i>moo</i></p>' );
 	} );
 
 	it( 'reacts to changes in model', function() {
 		view.model.plain = 'x';
-		expect( getOuterHtml( view.el ) ).to.be.equal( '<p class="a" x="x">b<b y="positive">c</b><i>moo</i></p>' );
+		expect( getOuterHtml( view.el ) ).to.be.equal( '<p class="a" x="x">bar<b y="positive">c</b><i>moo</i></p>' );
 
 		view.model.augmented = 2;
-		expect( getOuterHtml( view.el ) ).to.be.equal( '<p class="a" x="x">b<b y="positive">c</b><i>moo</i></p>' );
+		expect( getOuterHtml( view.el ) ).to.be.equal( '<p class="a" x="x">bar<b y="positive">c</b><i>moo</i></p>' );
 
 		view.model.augmented = -2;
-		expect( getOuterHtml( view.el ) ).to.be.equal( '<p class="a" x="x">b<b y="negative">c</b><i>moo</i></p>' );
+		expect( getOuterHtml( view.el ) ).to.be.equal( '<p class="a" x="x">bar<b y="negative">c</b><i>moo</i></p>' );
 
 		view.model.custom = 'foo';
-		expect( getOuterHtml( view.el ) ).to.be.equal( '<p class="a" x="x">b<b y="negative">c</b><i z="foo">foo</i></p>' );
+		expect( getOuterHtml( view.el ) ).to.be.equal( '<p class="a" x="x">bar<b y="negative">c</b><i z="foo">foo</i></p>' );
+
+		view.model.text = 'baz';
+		expect( getOuterHtml( view.el ) ).to.be.equal( '<p class="a" x="x">baz</p>' );
 	} );
 } );