8
0
Piotrek Koszuliński 9 лет назад
Родитель
Сommit
85b0219103
1 измененных файлов с 88 добавлено и 80 удалено
  1. 88 80
      packages/ckeditor5-ui/src/template.js

+ 88 - 80
packages/ckeditor5-ui/src/template.js

@@ -149,61 +149,18 @@ export default class Template {
 	 * There are two types of bindings:
 	 *
 	 * * `HTMLElement` attributes or Text Node `textContent` can be synchronized with {@link module:utils/observablemixin~ObservableMixin}
-	 * instance attributes. See {@link module:ui/template~Template.bind.to} and {@link module:ui/template~Template.bind.if}.
+	 * instance attributes. See {@link module:ui/template~BindChain#to} and {@link module:ui/template~BindChain#if}.
 	 *
 	 * * DOM events fired on `HTMLElement` can be propagated through {@link module:utils/observablemixin~ObservableMixin}.
-	 * See {@link module:ui/template~Template.bind.to}.
+	 * See {@link module:ui/template~BindChain#to}.
 	 *
 	 * @param {module:utils/observablemixin~ObservableMixin} observable An instance of ObservableMixin class.
 	 * @param {module:utils/emittermixin~EmitterMixin} emitter An instance of `Emitter` class. It listens
 	 * to `observable` attribute changes and DOM Events, depending on the binding. Usually {@link module:ui/view~View} instance.
-	 * @returns {Object}
+	 * @returns {module:ui/template~BindChain}
 	 */
 	static bind( observable, emitter ) {
 		return {
-			/**
-			 * Binds {@link module:utils/observablemixin~ObservableMixin} instance to:
-			 *  * HTMLElement attribute or Text Node `textContent` so remains in sync with the Observable when it changes:
-			 *  * HTMLElement DOM event, so the DOM events are propagated through Observable.
-			 *
-			 *		const bind = Template.bind( observableInstance, emitterInstance );
-			 *
-			 *		new Template( {
-			 *			tag: 'p',
-			 *			attributes: {
-			 *				// class="..." attribute gets bound to `observableInstance#a`
-			 *				'class': bind.to( 'a' )
-			 *			},
-			 *			children: [
-			 *				// <p>...</p> gets bound to `observableInstance#b`; always `toUpperCase()`.
-			 *				{ text: bind.to( 'b', ( value, node ) => value.toUpperCase() ) }
-			 *			],
-			 *			on: {
-			 *				click: [
-			 *					// "clicked" event will be fired on `observableInstance` when "click" fires in DOM.
-			 *					bind.to( 'clicked' ),
-			 *
-			 *					// A custom callback function will be executed when "click" fires in DOM.
-			 *					bind.to( () => {
-			 *						...
-			 *					} )
-			 *				]
-			 *			}
-			 *		} ).render();
-			 *
-			 *		const bind = Template.bind( observableInstance, emitterInstance );
-			 *
-			 *		new Template( {
-			 *			tag: 'p',
-			 *		} ).render();
-			 *
-			 * @function
-			 * @param {String|Function} eventNameOrFunctionOrAttribute An attribute name of {@link module:utils/observablemixin~ObservableMixin} or a
-			 * DOM
-			 * event name or an event callback.
-			 * @param {Function} [callback] Allows processing of the value. Accepts `Node` and `value` as arguments.
-			 * @return {module:ui/template~TemplateBinding}
-			 */
 			to( eventNameOrFunctionOrAttribute, callback ) {
 				return new TemplateToBinding( {
 					eventNameOrFunction: eventNameOrFunctionOrAttribute,
@@ -212,37 +169,6 @@ export default class Template {
 				} );
 			},
 
-			/**
-			 * Binds {@link module:utils/observablemixin~ObservableMixin} to HTMLElement attribute or Text Node `textContent`
-			 * so remains in sync with the Model when it changes. Unlike {@link module:ui/template~Template.bind.to},
-			 * it controls the presence of the attribute/`textContent` depending on the "falseness" of
-			 * {@link module:utils/observablemixin~ObservableMixin} attribute.
-			 *
-			 *		const bind = Template.bind( observableInstance, emitterInstance );
-			 *
-			 *		new Template( {
-			 *			tag: 'input',
-			 *			attributes: {
-			 *				// <input checked> when `observableInstance#a` is not undefined/null/false/''
-			 *				// <input> when `observableInstance#a` is undefined/null/false
-			 *				checked: bind.if( 'a' )
-			 *			},
-			 *			children: [
-			 *				{
-			 *					// <input>"b-is-not-set"</input> when `observableInstance#b` is undefined/null/false/''
-			 *					// <input></input> when `observableInstance#b` is not "falsy"
-			 *					text: bind.if( 'b', 'b-is-not-set', ( value, node ) => !value )
-			 *				}
-			 *			]
-			 *		} ).render();
-			 *
-			 * @function
-			 * @param {String} attribute An attribute name of {@link module:utils/observablemixin~ObservableMixin} used in the binding.
-			 * @param {String} [valueIfTrue] Value set when {@link module:utils/observablemixin~ObservableMixin} attribute is not
-			 * undefined/null/false/''.
-			 * @param {Function} [callback] Allows processing of the value. Accepts `Node` and `value` as arguments.
-			 * @return {module:ui/template~TemplateBinding}
-			 */
 			if( attribute, valueIfTrue, callback ) {
 				return new TemplateIfBinding( {
 					observable, emitter, attribute, valueIfTrue, callback
@@ -667,12 +593,12 @@ export class TemplateBinding {
 }
 
 /**
- * Describes either
+ * Describes either:
  *
  * * a binding to {@link module:utils/observablemixin~ObservableMixin}
  * * or a native DOM event binding
  *
- * created by {@link module:ui/template~Template.bind.to} method.
+ * created by {@link module:ui/template~BindChain#to} method.
  *
  * @protected
  */
@@ -699,7 +625,7 @@ export class TemplateToBinding extends TemplateBinding {
 }
 
 /**
- * Describes a binding to {@link module:utils/observablemixin~ObservableMixin} created by {@link module:ui/template~Template.bind.if}
+ * Describes a binding to {@link module:utils/observablemixin~ObservableMixin} created by {@link module:ui/template~BindChain#if}
  * method.
  *
  * @protected
@@ -1267,3 +1193,85 @@ function isViewCollection( item ) {
  * @typedef module:ui/template~TemplateListenerSchema
  * @type {Object|String|Array}
  */
+
+/**
+ * The type of {@link ~Template.bind}'s return value.
+ *
+ * @interface module:ui/template~BindChain
+ */
+
+/**
+ * Binds {@link module:utils/observablemixin~ObservableMixin} instance to:
+ *
+ * * HTMLElement attribute or Text Node `textContent` so remains in sync with the Observable when it changes:
+ * * HTMLElement DOM event, so the DOM events are propagated through Observable.
+ *
+ *		const bind = Template.bind( observableInstance, emitterInstance );
+ *
+ *		new Template( {
+ *			tag: 'p',
+ *			attributes: {
+ *				// class="..." attribute gets bound to `observableInstance#a`
+ *				'class': bind.to( 'a' )
+ *			},
+ *			children: [
+ *				// <p>...</p> gets bound to `observableInstance#b`; always `toUpperCase()`.
+ *				{ text: bind.to( 'b', ( value, node ) => value.toUpperCase() ) }
+ *			],
+ *			on: {
+ *				click: [
+ *					// "clicked" event will be fired on `observableInstance` when "click" fires in DOM.
+ *					bind.to( 'clicked' ),
+ *
+ *					// A custom callback function will be executed when "click" fires in DOM.
+ *					bind.to( () => {
+ *						...
+ *					} )
+ *				]
+ *			}
+ *		} ).render();
+ *
+ *		const bind = Template.bind( observableInstance, emitterInstance );
+ *
+ *		new Template( {
+ *			tag: 'p',
+ *		} ).render();
+ *
+ * @method #to
+ * @param {String|Function} eventNameOrFunctionOrAttribute An attribute name of
+ * {@link module:utils/observablemixin~ObservableMixin} or a DOM event name or an event callback.
+ * @param {Function} [callback] Allows processing of the value. Accepts `Node` and `value` as arguments.
+ * @return {module:ui/template~TemplateBinding}
+ */
+
+/**
+ * Binds {@link module:utils/observablemixin~ObservableMixin} to HTMLElement attribute or Text Node `textContent`
+ * so remains in sync with the Model when it changes. Unlike {@link module:ui/template~BindChain#to},
+ * it controls the presence of the attribute/`textContent` depending on the "falseness" of
+ * {@link module:utils/observablemixin~ObservableMixin} attribute.
+ *
+ *		const bind = Template.bind( observableInstance, emitterInstance );
+ *
+ *		new Template( {
+ *			tag: 'input',
+ *			attributes: {
+ *				// <input checked> when `observableInstance#a` is not undefined/null/false/''
+ *				// <input> when `observableInstance#a` is undefined/null/false
+ *				checked: bind.if( 'a' )
+ *			},
+ *			children: [
+ *				{
+ *					// <input>"b-is-not-set"</input> when `observableInstance#b` is undefined/null/false/''
+ *					// <input></input> when `observableInstance#b` is not "falsy"
+ *					text: bind.if( 'b', 'b-is-not-set', ( value, node ) => !value )
+ *				}
+ *			]
+ *		} ).render();
+ *
+ * @method #if
+ * @param {String} attribute An attribute name of {@link module:utils/observablemixin~ObservableMixin} used in the binding.
+ * @param {String} [valueIfTrue] Value set when {@link module:utils/observablemixin~ObservableMixin} attribute is not
+ * undefined/null/false/''.
+ * @param {Function} [callback] Allows processing of the value. Accepts `Node` and `value` as arguments.
+ * @return {module:ui/template~TemplateBinding}
+ */