Bladeren bron

Modified View#constructor so it no longer accepts Model as an argument.

Aleksander Nowodzinski 9 jaren geleden
bovenliggende
commit
df8e92c419
3 gewijzigde bestanden met toevoegingen van 55 en 43 verwijderingen
  1. 1 1
      packages/ckeditor5-ui/src/template.js
  2. 27 11
      packages/ckeditor5-ui/src/view.js
  3. 27 31
      packages/ckeditor5-ui/tests/view.js

+ 1 - 1
packages/ckeditor5-ui/src/template.js

@@ -122,7 +122,7 @@ export default class Template {
 	 * @param {utils.ObservableMixin} observable An instance of ObservableMixin class.
 	 * @param {utils.EmitterMixin} emitter An instance of `EmitterMixin` class. It listens
 	 * to `observable` attribute changes and DOM Events, depending on the binding. Usually {@link ui.View} instance.
-	 * @returns {ui.TemplateBinding}
+	 * @returns {Object}
 	 */
 	static bind( observable, emitter ) {
 		return {

+ 27 - 11
packages/ckeditor5-ui/src/view.js

@@ -5,6 +5,7 @@
 
 'use strict';
 
+import Model from './model.js';
 import Collection from '../utils/collection.js';
 import Region from './region.js';
 import Template from './template.js';
@@ -22,16 +23,15 @@ export default class View {
 	/**
 	 * Creates an instance of the {@link ui.View} class.
 	 *
-	 * @param {ui.Model} model (View)Model of this View.
 	 * @param {utils.Locale} [locale] The {@link ckeditor5.Editor#locale editor's locale} instance.
 	 */
-	constructor( model, locale ) {
+	constructor( locale ) {
 		/**
 		 * Model of this view.
 		 *
 		 * @member {ui.Model} ui.View#model
 		 */
-		this.model = model;
+		this.model = new Model();
 
 		/**
 		 * @readonly
@@ -59,14 +59,6 @@ export default class View {
 		} );
 
 		/**
-		 * Shorthand for {@link ui.Template#bind}, bound to {@link ui.View#model}
-		 * and {@link ui.View}.
-		 *
-		 * @method ui.View#bind
-		 */
-		this.bind = Template.bind( this.model, this );
-
-		/**
 		 * Template of this view.
 		 *
 		 * @member {ui.Template} ui.View#template
@@ -86,6 +78,14 @@ export default class View {
 		 * @private
 		 * @member {HTMLElement} ui.View.#_element
 		 */
+
+		/**
+		 * Cached {@link ui.Template} binder object specific for this instance.
+		 * See {@link ui.View#bind}.
+		 *
+		 * @private
+		 * @member {Object} ui.View.#_bind
+		 */
 	}
 
 	/**
@@ -112,6 +112,22 @@ export default class View {
 	}
 
 	/**
+	 * Shorthand for {@link ui.Template#bind}, bound to {@link ui.View#model}
+	 * and {@link ui.View} on the first access.
+	 *
+	 * Cached {@link ui.Template#bind} object is stored in {@link ui.View.#_bind}.
+	 *
+	 * @method ui.View#bind
+	 */
+	get bind() {
+		if ( this._bind ) {
+			return this._bind;
+		}
+
+		return ( this._bind = Template.bind( this.model, this ) );
+	}
+
+	/**
 	 * Initializes the view.
 	 *
 	 * Note: {@link ui.Controller} supports if a promise is returned by this method,

+ 27 - 31
packages/ckeditor5-ui/tests/view.js

@@ -13,7 +13,6 @@ import View from '/ckeditor5/ui/view.js';
 import Template from '/ckeditor5/ui/template.js';
 import Region from '/ckeditor5/ui/region.js';
 import CKEditorError from '/ckeditor5/utils/ckeditorerror.js';
-import Model from '/ckeditor5/ui/model.js';
 
 let TestView, view;
 
@@ -26,39 +25,17 @@ describe( 'View', () => {
 			setTestViewInstance();
 		} );
 
-		it( 'accepts the model', () => {
-			setTestViewInstance( { a: 'foo', b: 42 } );
-
-			expect( view.model ).to.be.an.instanceof( Model );
-			expect( view ).to.have.deep.property( 'model.a', 'foo' );
-			expect( view ).to.have.deep.property( 'model.b', 42 );
-		} );
-
 		it( 'defines basic view properties', () => {
-			const model = new Model();
-
-			view = new View( model );
+			view = new View();
 
-			expect( view.model ).to.equal( model );
 			expect( view.t ).to.be.undefined;
 			expect( view.regions.length ).to.equal( 0 );
 		} );
 
-		it( 'creates view#bind shorthand for Template binding', () => {
-			expect( view.bind.to ).to.be.a( 'function' );
-			expect( view.bind.if ).to.be.a( 'function' );
-
-			const binding = view.bind.to( 'a' );
-
-			expect( binding.observable ).to.equal( view.model );
-			expect( binding.emitter ).to.equal( view );
-		} );
-
-		it( 'defines the locale property and the t function', () => {
-			const model = new Model();
+		it( 'defines the locale property and the "t" function', () => {
 			const locale = { t() {} };
 
-			view = new View( model, locale );
+			view = new View( locale );
 
 			expect( view.locale ).to.equal( locale );
 			expect( view.t ).to.equal( locale.t );
@@ -140,6 +117,23 @@ describe( 'View', () => {
 		} );
 	} );
 
+	describe( 'bind', () => {
+		beforeEach( () => {
+			setTestViewClass();
+			setTestViewInstance();
+		} );
+
+		it( 'returns a shorthand for Template binding', () => {
+			expect( view.bind.to ).to.be.a( 'function' );
+			expect( view.bind.if ).to.be.a( 'function' );
+
+			const binding = view.bind.to( 'a' );
+
+			expect( binding.observable ).to.equal( view.model );
+			expect( binding.emitter ).to.equal( view );
+		} );
+	} );
+
 	describe( 'register', () => {
 		beforeEach( () => {
 			setTestViewClass();
@@ -223,7 +217,9 @@ describe( 'View', () => {
 		beforeEach( createViewInstanceWithTemplate );
 
 		it( 'invokes out of #template', () => {
-			setTestViewInstance( { a: 1 } );
+			setTestViewInstance();
+
+			view.model.set( 'a', 1 );
 
 			expect( view.element ).to.be.an.instanceof( HTMLElement );
 			expect( view.element.nodeName ).to.equal( 'A' );
@@ -303,8 +299,8 @@ function createViewInstanceWithTemplate() {
 
 function setTestViewClass( templateDef, regionsFn ) {
 	TestView = class V extends View {
-		constructor( model ) {
-			super( model );
+		constructor() {
+			super();
 
 			if ( templateDef ) {
 				this.template = new Template( templateDef );
@@ -317,8 +313,8 @@ function setTestViewClass( templateDef, regionsFn ) {
 	};
 }
 
-function setTestViewInstance( model ) {
-	view = new TestView( new Model( model ) );
+function setTestViewInstance() {
+	view = new TestView();
 
 	if ( view.template ) {
 		document.body.appendChild( view.element );