JGonera has uploaded a new change for review.
https://gerrit.wikimedia.org/r/90686
Change subject: [WIP] Add template partials support to View
......................................................................
[WIP] Add template partials support to View
This makes template inheritance possible and template reusability
easier. See Overlay.js and EditorOverlay.js for an example.
Change-Id: Ic36ec557cf9cc24f785a9a04642fccc7ab383936
---
M javascripts/common/View.js
M javascripts/modules/editor/EditorOverlay.js
M templates/modules/editor/EditorOverlay.html
M templates/overlay.html
M tests/javascripts/common/test_View.js
5 files changed, 48 insertions(+), 8 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/86/90686/1
diff --git a/javascripts/common/View.js b/javascripts/common/View.js
index 24c071e..23e7eb1 100644
--- a/javascripts/common/View.js
+++ b/javascripts/common/View.js
@@ -58,6 +58,7 @@
initialize: function( options ) {
this._super();
this.defaults = $.extend( {}, this._parent.defaults,
this.defaults );
+ this.templatePartials = $.extend( {},
this._parent.templatePartials, this.templatePartials );
options = $.extend( {}, this.defaults, options );
if ( options.el ) {
this.$el = $( options.el );
@@ -102,7 +103,7 @@
data = $.extend( true, {}, this.options, data );
this.preRender( data );
if ( this.template ) {
- this.$el.html( this.template.render( data ) );
+ this.$el.html( this.template.render( data,
this.templatePartials ) );
}
this.postRender( data );
diff --git a/javascripts/modules/editor/EditorOverlay.js
b/javascripts/modules/editor/EditorOverlay.js
index b4695f1..c12a532 100644
--- a/javascripts/modules/editor/EditorOverlay.js
+++ b/javascripts/modules/editor/EditorOverlay.js
@@ -29,7 +29,9 @@
abusefilterReadMoreMsg: mw.msg(
'mobile-frontend-editor-abusefilter-read-more')
},
// FIXME: [QA] Needs an acceptance test to ensure we do not
break the first time editor workflow
- template: M.template.get( 'modules/editor/EditorOverlay' ),
+ templatePartials: {
+ overlayPartial: M.template.get(
'modules/editor/EditorOverlay' )
+ },
className: 'mw-mf-overlay editor-overlay',
closeOnBack: true,
diff --git a/templates/modules/editor/EditorOverlay.html
b/templates/modules/editor/EditorOverlay.html
index eabe5f4..ebb59d6 100644
--- a/templates/modules/editor/EditorOverlay.html
+++ b/templates/modules/editor/EditorOverlay.html
@@ -1,6 +1,3 @@
-<div class="header">
- <button class="cancel">{{closeMsg}}</button>
-</div>
<div class="spinner loading"></div>
<textarea cols="40" rows="10" placeholder="{{placeholder}}"></textarea>
<div class="preview">
diff --git a/templates/overlay.html b/templates/overlay.html
index f4e26f6..84439cd 100644
--- a/templates/overlay.html
+++ b/templates/overlay.html
@@ -3,3 +3,4 @@
{{{heading}}}
</div>
{{{content}}}
+{{>overlayPartial}}
diff --git a/tests/javascripts/common/test_View.js
b/tests/javascripts/common/test_View.js
index ad3f744..f931cdb 100644
--- a/tests/javascripts/common/test_View.js
+++ b/tests/javascripts/common/test_View.js
@@ -1,4 +1,4 @@
-( function( M, $) {
+( function( M, $ ) {
var View = M.require( 'view' );
@@ -49,7 +49,7 @@
var ChildView, view;
ChildView = View.extend( {
className: 'my-class',
- template: '<h1>{{title}}</h1><p>{{content}}</p>',
+ template: M.template.compile(
'<h1>{{title}}</h1><p>{{content}}</p>' ),
title: function() {
return this.$( 'h1' ).text();
},
@@ -63,6 +63,45 @@
strictEqual( view.$el.attr( 'class' ), 'my-class', 'set class for $el'
);
strictEqual( view.title(), 'Test', 'fill template with data from
options' );
strictEqual( view.content(), 'Some content', 'fill template with data
from options' );
+} );
+
+QUnit.test( 'View.extend, with partials', 2, function( assert ) {
+ var ParentView, ChildView, view;
+
+ ParentView = View.extend( {
+ template: M.template.compile( '<h1>{{title}}</h1>{{>content}}' )
+ } );
+
+ ChildView = ParentView.extend( {
+ templatePartials: {
+ content: M.template.compile( '<p>{{text}}</p>' )
+ }
+ } );
+
+ view = new ChildView( { title: 'Test', text: 'Some content' } );
+ strictEqual( view.$( 'h1' ).text(), 'Test', 'fill template with data
from options' );
+ strictEqual( view.$( 'p' ).text(), 'Some content', 'fill partial with
data from options' );
+} );
+
+QUnit.test( 'View.extend, extending partials', 1, function( assert ) {
+ var ParentView, ChildView, view;
+
+ ParentView = View.extend( {
+ templatePartials: {
+ a: 1,
+ b: 2
+ }
+ } );
+
+ ChildView = ParentView.extend( {
+ templatePartials: {
+ b: 3,
+ c: 4
+ }
+ } );
+
+ view = new ChildView();
+ assert.deepEqual( view.templatePartials, { a: 1, b: 3, c: 4 } );
} );
QUnit.test( 'View.extend, extending defaults', 1, function( assert ) {
@@ -89,7 +128,7 @@
QUnit.test( 'View#preRender', 1, function() {
var ChildView, view;
ChildView = View.extend( {
- template: '<p>{{something}}</p>',
+ template: M.template.compile( '<p>{{something}}</p>' ),
preRender: function( options ) {
options.something = 'hello';
}
--
To view, visit https://gerrit.wikimedia.org/r/90686
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ic36ec557cf9cc24f785a9a04642fccc7ab383936
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: JGonera <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
