template.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717
  1. /**
  2. * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /* global document */
  6. 'use strict';
  7. import CKEditorError from '../utils/ckeditorerror.js';
  8. import mix from '../utils/mix.js';
  9. import EmitterMixin from '/ckeditor5/utils/emittermixin.js';
  10. const bindToSymbol = Symbol( 'bindTo' );
  11. const bindIfSymbol = Symbol( 'bindIf' );
  12. const bindDOMEvtSymbol = Symbol( 'bindDomEvt' );
  13. /**
  14. * Basic Template class.
  15. *
  16. * @memberOf ui
  17. */
  18. export default class Template {
  19. /**
  20. * Creates an instance of the {@link ui.Template} class.
  21. *
  22. * @param {ui.TemplateDefinition} def The definition of the template.
  23. */
  24. constructor( def ) {
  25. /**
  26. * Definition of this template.
  27. *
  28. * @readonly
  29. * @member {ui.TemplateDefinition} ui.Template#definition
  30. */
  31. this.definition = def;
  32. }
  33. /**
  34. * Renders DOM Node using {@link ui.Template#definition}.
  35. *
  36. * @see ui.Template#apply
  37. *
  38. * @returns {HTMLElement}
  39. */
  40. render() {
  41. return this._renderNode( this.definition, undefined, true );
  42. }
  43. /**
  44. * Applies template {@link ui.Template#def} to existing DOM tree.
  45. *
  46. * **Note:** No new DOM nodes (elements, text nodes) will be created.
  47. *
  48. * @see ui.Template#render
  49. * @see ui.View#applyTemplateToElement.
  50. *
  51. * @param {Node} element Root element for template to apply.
  52. */
  53. apply( node ) {
  54. if ( !node ) {
  55. /**
  56. * No DOM Node specified.
  57. *
  58. * @error ui-template-wrong-syntax
  59. */
  60. throw new CKEditorError( 'ui-template-wrong-node' );
  61. }
  62. return this._renderNode( this.definition, node );
  63. }
  64. /**
  65. * Renders a DOM Node from definition.
  66. *
  67. * @protected
  68. * @param {ui.TemplateDefinition} def Definition of a Node.
  69. * @param {Node} applyNode If specified, template `def` will be applied to existing DOM Node.
  70. * @param {Boolean} intoFragment If set, children are rendered into DocumentFragment.
  71. * @returns {HTMLElement} A rendered Node.
  72. */
  73. _renderNode( def, applyNode, intoFragment ) {
  74. normalize( def );
  75. // When applying, a definition cannot have "tag" and "text" at the same time.
  76. // When rendering, a definition must have either "tag" or "text": XOR( def.tag, def.text ).
  77. const isInvalid = applyNode ?
  78. ( def.tag && def.text ) : ( def.tag ? def.text : !def.text );
  79. if ( isInvalid ) {
  80. /**
  81. * Node definition cannot have "tag" and "text" properties at the same time.
  82. * Node definition must have either "tag" or "text" when rendering new Node.
  83. *
  84. * @error ui-template-wrong-syntax
  85. */
  86. throw new CKEditorError( 'ui-template-wrong-syntax' );
  87. }
  88. return def.text ?
  89. this._renderText( def, applyNode ) : this._renderElement( def, applyNode, intoFragment );
  90. }
  91. /**
  92. * Renders an HTMLElement from TemplateDefinition.
  93. *
  94. * @protected
  95. * @param {ui.TemplateDefinition} def Definition of an element.
  96. * @param {HTMLElement} applyElement If specified, template `def` will be applied to existing HTMLElement.
  97. * @param {Boolean} intoFragment If set, children are rendered into DocumentFragment.
  98. * @returns {HTMLElement} A rendered element.
  99. */
  100. _renderElement( def, applyElement, intoFragment ) {
  101. const el = applyElement ||
  102. document.createElementNS( def.ns || 'http://www.w3.org/1999/xhtml', def.tag );
  103. this._renderElementAttributes( def, el );
  104. // Invoke children recursively.
  105. if ( intoFragment ) {
  106. const docFragment = document.createDocumentFragment();
  107. this._renderElementChildren( def, docFragment );
  108. el.appendChild( docFragment );
  109. } else {
  110. this._renderElementChildren( def, el, !!applyElement );
  111. }
  112. // Setup DOM bindings event listeners.
  113. this._setupListeners( def, el );
  114. return el;
  115. }
  116. /**
  117. * Renders a Text from TemplateDefinition or String.
  118. *
  119. * @protected
  120. * @param {TemplateDefinition|String} def Definition of Text or its value.
  121. * @param {HTMLElement} textNode If specified, template `def` will be applied to existing Text Node.
  122. * @returns {Text} A rendered Text.
  123. */
  124. _renderText( valueSchemaOrText, textNode = document.createTextNode( '' ) ) {
  125. // Check if there's a binder available for this Text Node. Cases:
  126. // { text: [ Template.bind.to( ... ) ] }
  127. // { text: [ 'foo', Template.bind.to( ... ), ... ] }
  128. if ( isBound( valueSchemaOrText.text ) ) {
  129. this._bindToObservable( valueSchemaOrText.text, textNode, getTextUpdater( textNode ) );
  130. }
  131. // Simply set text. Cases:
  132. // { text: [ 'all', 'are', 'static' ] }
  133. // { text: [ 'foo' ] }
  134. else {
  135. textNode.textContent = valueSchemaOrText.text;
  136. }
  137. return textNode;
  138. }
  139. /**
  140. * Renders element attributes from definition.
  141. *
  142. * @protected
  143. * @param {ui.TemplateDefinition} def Definition of an element.
  144. * @param {HTMLElement} el Element which is rendered.
  145. */
  146. _renderElementAttributes( { attributes }, el ) {
  147. let attrName, attrValue, attrNs;
  148. if ( !attributes ) {
  149. return;
  150. }
  151. for ( attrName in attributes ) {
  152. attrValue = attributes[ attrName ];
  153. attrNs = attrValue[ 0 ].ns || null;
  154. // Activate binder if one. Cases:
  155. // { class: [ Template.bind.to( ... ) ] }
  156. // { class: [ 'bar', Template.bind.to( ... ), 'baz' ] }
  157. // { class: { ns: 'abc', value: Template.bind.to( ... ) } }
  158. if ( isBound( attrValue ) ) {
  159. // Normalize attributes with additional data like namespace:
  160. // { class: { ns: 'abc', value: [ ... ] } }
  161. this._bindToObservable(
  162. attrValue[ 0 ].value || attrValue,
  163. el,
  164. getAttributeUpdater( el, attrName, attrNs )
  165. );
  166. }
  167. // Otherwise simply set the attribute.
  168. // { class: [ 'foo' ] }
  169. // { class: [ 'all', 'are', 'static' ] }
  170. // { class: [ { ns: 'abc', value: [ 'foo' ] } ] }
  171. else {
  172. attrValue = attrValue
  173. // Retrieve "values" from { class: [ { ns: 'abc', value: [ ... ] } ] }
  174. .map( v => v ? ( v.value || v ) : v )
  175. // Flatten the array.
  176. .reduce( ( p, n ) => p.concat( n ), [] )
  177. // Convert into string.
  178. .reduce( arrayValueReducer );
  179. el.setAttributeNS( attrNs, attrName, attrValue );
  180. }
  181. }
  182. }
  183. /**
  184. * Recursively renders element children from definition by
  185. * calling {@link ui.Template#_renderElement}.
  186. *
  187. * @protected
  188. * @param {ui.TemplateDefinition} def Definition of an element.
  189. * @param {HTMLElement} el Element which is rendered.
  190. * @param {Boolean} isApply Traverse existing DOM structure only, don't modify DOM.
  191. */
  192. _renderElementChildren( def, el, isApply ) {
  193. if ( def.children ) {
  194. def.children.forEach( ( childDef, index ) => {
  195. if ( isApply ) {
  196. this._renderNode( childDef, el.childNodes[ index ] );
  197. } else {
  198. el.appendChild( this._renderNode( childDef ) );
  199. }
  200. } );
  201. }
  202. }
  203. /**
  204. * Activates element `on` listeners passed in element definition.
  205. *
  206. * @protected
  207. * @param {ui.TemplateDefinition} def Definition of an element.
  208. * @param {HTMLElement} el Element which is being rendered.
  209. */
  210. _setupListeners( def, el ) {
  211. if ( !def.on ) {
  212. return;
  213. }
  214. for ( let key in def.on ) {
  215. const [ domEvtName, domSelector ] = key.split( '@' );
  216. def.on[ key ].forEach( schemaItem => {
  217. schemaItem.emitter.listenTo( el, domEvtName, ( evt, domEvt ) => {
  218. if ( !domSelector || domEvt.target.matches( domSelector ) ) {
  219. if ( typeof schemaItem.eventNameOrFuncion == 'function' ) {
  220. schemaItem.eventNameOrFuncion( domEvt );
  221. } else {
  222. schemaItem.observable.fire( schemaItem.eventNameOrFuncion, domEvt );
  223. }
  224. }
  225. } );
  226. } );
  227. }
  228. }
  229. /**
  230. * For given {@link ui.TemplateValueSchema} containing {@link ui.TemplateBinding} it activates the
  231. * binding and sets its initial value.
  232. *
  233. * Note: {@link ui.TemplateValueSchema} can be for HTMLElement attributes or Text Node `textContent`.
  234. *
  235. * @protected
  236. * @param {ui.TemplateValueSchema}
  237. * @param {Node} node DOM Node to be updated when {@link utils.ObservableMixin} changes.
  238. * @param {Function} domUpdater A function which updates DOM (like attribute or text).
  239. */
  240. _bindToObservable( valueSchema ) {
  241. valueSchema
  242. // Filter inactive bindings from schema, like static strings, etc.
  243. .filter( item => item.observable )
  244. // Let the emitter listen to observable change:attribute event.
  245. // TODO: Reduce the number of listeners attached as many bindings may listen
  246. // to the same observable attribute.
  247. .forEach( ( { emitter, observable, attribute } ) => {
  248. emitter.listenTo( observable, 'change:' + attribute, () => {
  249. syncDom( ...arguments );
  250. } );
  251. } );
  252. // Set initial values.
  253. syncDom( ...arguments );
  254. }
  255. }
  256. mix( Template, EmitterMixin );
  257. /**
  258. * An entry point to the interface which allows binding attributes of {@link utils.ObservableMixin}
  259. * to the DOM items like HTMLElement attributes or Text Node `textContent`, so their state
  260. * is synchronized with {@link View#model}.
  261. *
  262. * @param {utils.ObservableMixin} observable An instance of ObservableMixin class.
  263. * @param {utils.EmitterMixin} emitter An instance of EmitterMixin class.
  264. */
  265. Template.bind = ( observable, emitter ) => {
  266. /**
  267. * Binds {@link utils.ObservableMixin} instance to HTMLElement DOM event, so the DOM events
  268. * are propagated through Observable.
  269. *
  270. * const bind = Template.bind( observableInstance, emitterInstance );
  271. *
  272. * new Template( {
  273. * tag: 'p',
  274. * on: {
  275. * click: [
  276. * // "clicked" event will be fired on `observableInstance` when "click" fires in DOM.
  277. * bind( 'clicked' ),
  278. *
  279. * // A custom callback function will be executed when "click" fires in DOM.
  280. * bind( () => {
  281. * ...
  282. * } )
  283. * ]
  284. * }
  285. * } ).render();
  286. *
  287. * @static
  288. * @property {ui.Template.bind#eventBinder}
  289. * @param {String} eventNameOrFuncion Name of the DOM event to be fired along with DOM event or custom function.
  290. * @return {ui.TemplateBinding}
  291. */
  292. const eventBinder = ( eventNameOrFuncion ) => {
  293. return {
  294. type: bindDOMEvtSymbol,
  295. observable, emitter,
  296. eventNameOrFuncion
  297. };
  298. };
  299. /**
  300. * Binds {@link utils.ObservableMixin} to HTMLElement attribute or Text Node `textContent`
  301. * so remains in sync with the Observable when it changes.
  302. *
  303. * const bind = Template.bind( observableInstance, emitterInstance );
  304. *
  305. * new Template( {
  306. * tag: 'p',
  307. * attributes: {
  308. * // class="..." attribute gets bound to `observableInstance#a`
  309. * 'class': bind.to( 'a' )
  310. * },
  311. * children: [
  312. * // <p>...</p> gets bound to `observableInstance#b`; always `toUpperCase()`.
  313. * { text: bind.to( 'b', ( value, node ) => value.toUpperCase() ) }
  314. * ]
  315. * } ).render();
  316. *
  317. * @static
  318. * @property {ui.Template.bind.eventBinder#to}
  319. * @param {String} attribute Name of {@link utils.ObservableMixin} used in the binding.
  320. * @param {Function} [callback] Allows processing of the value. Accepts `Node` and `value` as arguments.
  321. * @return {ui.TemplateBinding}
  322. */
  323. eventBinder.to = ( attribute, callback ) => {
  324. return {
  325. type: bindToSymbol,
  326. observable, emitter,
  327. attribute, callback
  328. };
  329. };
  330. /**
  331. * Binds {@link utils.ObservableMixin} to HTMLElement attribute or Text Node `textContent`
  332. * so remains in sync with the Model when it changes. Unlike {@link ui.Template.bind.eventBinder#to},
  333. * it controls the presence of the attribute/`textContent` depending on the "falseness" of
  334. * {@link utils.ObservableMixin} attribute.
  335. *
  336. * const bind = Template.bind( observableInstance, emitterInstance );
  337. *
  338. * new Template( {
  339. * tag: 'input',
  340. * attributes: {
  341. * // <input checked> when `observableInstance#a` is not undefined/null/false/''
  342. * // <input> when `observableInstance#a` is undefined/null/false
  343. * checked: bind.if( 'a' )
  344. * },
  345. * children: [
  346. * {
  347. * // <input>"b-is-not-set"</input> when `observableInstance#b` is undefined/null/false/''
  348. * // <input></input> when `observableInstance#b` is not "falsy"
  349. * text: bind.if( 'b', 'b-is-not-set', ( value, node ) => !value )
  350. * }
  351. * ]
  352. * } ).render();
  353. *
  354. * @static
  355. * @property {ui.Template.bind.eventBinder#if}
  356. * @param {String} attribute An attribute name of {@link utils.ObservableMixin} used in the binding.
  357. * @param {String} [valueIfTrue] Value set when {@link utils.ObservableMixin} attribute is not undefined/null/false/''.
  358. * @param {Function} [callback] Allows processing of the value. Accepts `Node` and `value` as arguments.
  359. * @return {ui.TemplateBinding}
  360. */
  361. eventBinder.if = ( attribute, valueIfTrue, callback ) => {
  362. return {
  363. type: bindIfSymbol,
  364. observable, emitter,
  365. attribute, valueIfTrue, callback
  366. };
  367. };
  368. return eventBinder;
  369. };
  370. /**
  371. * Assembles the value using {@link ui.TemplateValueSchema} and stores it in a form of
  372. * an Array. Each entry of an Array corresponds to one of {@link ui.TemplateValueSchema}
  373. * items.
  374. *
  375. * @private
  376. * @param {Node} domNode
  377. * @return {Array}
  378. */
  379. function getBoundValue( valueSchema, domNode ) {
  380. return valueSchema.map( schemaItem => {
  381. let { observable, callback, type } = schemaItem;
  382. if ( observable ) {
  383. let modelValue = observable[ schemaItem.attribute ];
  384. // Process the value with the callback.
  385. if ( callback ) {
  386. modelValue = callback( modelValue, domNode );
  387. }
  388. if ( type === bindIfSymbol ) {
  389. return !!modelValue ? schemaItem.valueIfTrue || true : '';
  390. } else {
  391. return modelValue;
  392. }
  393. } else {
  394. return schemaItem;
  395. }
  396. } );
  397. }
  398. /**
  399. * A function executed each time bound Observable attribute changes, which updates DOM with a value
  400. * constructed from {@link ui.TemplateValueSchema}.
  401. */
  402. function syncDom( valueSchema, domNode, domUpdater ) {
  403. let value = getBoundValue( valueSchema, domNode );
  404. let shouldSet;
  405. // Check if valueSchema is a single Template.bind.if, like:
  406. // { class: Template.bind.if( 'foo' ) }
  407. if ( valueSchema.length == 1 && valueSchema[ 0 ].type == bindIfSymbol ) {
  408. value = value[ 0 ];
  409. shouldSet = value !== '';
  410. if ( shouldSet ) {
  411. value = value === true ? '' : value;
  412. }
  413. } else {
  414. value = value.reduce( arrayValueReducer, '' );
  415. shouldSet = value;
  416. }
  417. if ( shouldSet ) {
  418. domUpdater.set( value );
  419. } else {
  420. domUpdater.remove();
  421. }
  422. }
  423. /**
  424. * Describes Model binding created by {@link Template#bind}.
  425. *
  426. * @typedef ui.TemplateBinding
  427. * @type Object
  428. * @property {Symbol} type
  429. * @property {ui.Model} model
  430. * @property {String} attribute
  431. * @property {String} [valueIfTrue]
  432. * @property {Function} [callback]
  433. */
  434. /*
  435. * Returns an object consisting of `set` and `remove` functions, which
  436. * can be used in the context of DOM Node to set or reset `textContent`.
  437. * @see ui.View#_bindToObservable
  438. *
  439. * @private
  440. * @param {Node} node DOM Node to be modified.
  441. * @returns {Object}
  442. */
  443. function getTextUpdater( node ) {
  444. return {
  445. set( value ) {
  446. node.textContent = value;
  447. },
  448. remove() {
  449. node.textContent = '';
  450. }
  451. };
  452. }
  453. /*
  454. * Returns an object consisting of `set` and `remove` functions, which
  455. * can be used in the context of DOM Node to set or reset an attribute.
  456. * @see ui.View#_bindToObservable
  457. *
  458. * @private
  459. * @param {Node} node DOM Node to be modified.
  460. * @param {String} attrName Name of the attribute to be modified.
  461. * @param {String} [ns] Namespace to use.
  462. * @returns {Object}
  463. */
  464. function getAttributeUpdater( el, attrName, ns = null ) {
  465. return {
  466. set( value ) {
  467. el.setAttributeNS( ns, attrName, value );
  468. },
  469. remove() {
  470. el.removeAttributeNS( ns, attrName );
  471. }
  472. };
  473. }
  474. /**
  475. * Normalizes given {@link ui.TemplateValueSchema} it's always in an Array–like format:
  476. *
  477. * { attr|text: 'bar' } ->
  478. * { attr|text: [ 'bar' ] }
  479. *
  480. * { attr|text: { model: ..., modelAttributeName: ..., callback: ... } } ->
  481. * { attr|text: [ { model: ..., modelAttributeName: ..., callback: ... } ] }
  482. *
  483. * { attr|text: [ 'bar', { model: ..., modelAttributeName: ... }, 'baz' ] }
  484. *
  485. * 'foo@selector': 'bar' ->
  486. * 'foo@selector': [ 'bar' ],
  487. *
  488. * 'foo@selector': [ 'bar', () => { ... } ] ->
  489. * 'foo@selector': [ 'bar', () => { ... } ],
  490. *
  491. * @ignore
  492. * @private
  493. * @param {ui.TemplateValueSchema} valueSchema
  494. * @returns {Array}
  495. */
  496. function normalize( def ) {
  497. if ( def.attributes ) {
  498. normalizeAttributes( def.attributes );
  499. }
  500. if ( def.on ) {
  501. normalizeListeners( def.on );
  502. }
  503. if ( def.children ) {
  504. normalizeTextChildren( def );
  505. }
  506. }
  507. function normalizeAttributes( attrs ) {
  508. for ( let a in attrs ) {
  509. if ( attrs[ a ].value ) {
  510. attrs[ a ].value = [].concat( attrs[ a ].value );
  511. }
  512. arrayify( attrs, a );
  513. }
  514. }
  515. function normalizeListeners( listeners ) {
  516. for ( let l in listeners ) {
  517. arrayify( listeners, l );
  518. }
  519. }
  520. function normalizeTextChildren( def ) {
  521. def.children = def.children.map( c => {
  522. if ( typeof c == 'string' ) {
  523. return {
  524. text: [ c ]
  525. };
  526. } else {
  527. if ( c.text && !Array.isArray( c.text ) ) {
  528. c.text = [ c.text ];
  529. }
  530. }
  531. return c;
  532. } );
  533. }
  534. function arrayify( obj, key ) {
  535. if ( !Array.isArray( obj[ key ] ) ) {
  536. obj[ key ] = [ obj[ key ] ];
  537. }
  538. }
  539. /**
  540. * A helper which concatenates the value avoiding unwanted
  541. * leading white spaces.
  542. *
  543. * @ignore
  544. * @private
  545. * @param {String} prev
  546. * @param {String} cur
  547. * @returns {String}
  548. */
  549. function arrayValueReducer( prev, cur ) {
  550. return prev === '' ?
  551. `${cur}`
  552. :
  553. cur === '' ? `${prev}` : `${prev} ${cur}`;
  554. }
  555. /**
  556. * Checks whether given {@link ui.TemplateValueSchema} contains a
  557. * {@link ui.TemplateBinding}.
  558. *
  559. * @ignore
  560. * @private
  561. * @param {ui.TemplateValueSchema} valueSchema
  562. * @returns {Boolean}
  563. */
  564. function isBound( valueSchema ) {
  565. if ( !valueSchema ) {
  566. return false;
  567. }
  568. // Normalize attributes with additional data like namespace:
  569. // class: { ns: 'abc', value: [ ... ] }
  570. if ( valueSchema.value ) {
  571. valueSchema = valueSchema.value;
  572. }
  573. if ( Array.isArray( valueSchema ) ) {
  574. return valueSchema.some( isBound );
  575. } else if ( valueSchema.observable ) {
  576. return true;
  577. }
  578. return false;
  579. }
  580. /**
  581. * Definition of {@link Template}.
  582. * See: {@link ui.TemplateValueSchema}.
  583. *
  584. * {
  585. * tag: 'p',
  586. * children: [
  587. * {
  588. * tag: 'span',
  589. * attributes: { ... },
  590. * children: [ ... ],
  591. * ...
  592. * },
  593. * {
  594. * text: 'static–text'
  595. * },
  596. * 'also-static–text',
  597. * ...
  598. * ],
  599. * attributes: {
  600. * 'class': [ 'class-a', 'class-b' ],
  601. * id: 'element-id',
  602. * style: callback,
  603. * ...
  604. * },
  605. * on: {
  606. * 'click': 'clicked'
  607. * 'mouseup': [ 'view-event-a', 'view-event-b', callback ],
  608. * 'keyup@selector': 'view-event',
  609. * 'focus@selector': [ 'view-event-a', 'view-event-b', callback ],
  610. * ...
  611. * }
  612. * }
  613. *
  614. * @typedef ui.TemplateDefinition
  615. * @type Object
  616. * @property {String} tag
  617. * @property {Array} [children]
  618. * @property {Object} [attributes]
  619. * @property {String} [text]
  620. * @property {Object} [on]
  621. * @property {Object} _modelBinders
  622. */
  623. /**
  624. * Describes a value of HTMLElement attribute or `textContent`.
  625. * See: {@link ui.TemplateDefinition}.
  626. *
  627. * {
  628. * tag: 'p',
  629. * attributes: {
  630. * // Plain String schema.
  631. * class: 'class-foo'
  632. *
  633. * // Object schema, a Model binding.
  634. * class: { model: m, attribute: 'foo', callback... }
  635. *
  636. * // Array schema, combines the above.
  637. * class: [ 'foo', { model: m, attribute: 'bar' }, 'baz' ],
  638. *
  639. * // Array schema, with custom namespace.
  640. * class: {
  641. * ns: 'http://ns.url',
  642. * value: [ 'foo', { model: m, attribute: 'bar' }, 'baz' ]
  643. * }
  644. * }
  645. * }
  646. *
  647. * @typedef ui.TemplateValueSchema
  648. * @type {Object|String|Array}
  649. */