8
0
فهرست منبع

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>' );
 	} );
 } );