Have a consistent way of doing Views within Views
Closed, DuplicatePublic
Actions

Assigned To

None

Authored By

	Jdlrobson
	Jun 26 2015, 4:50 PM

Description

Sometimes we need to put a View inside another View. A good example is the Icon class which sometimes gets embedded in a template using

{{{icon}}}

And sometimes as

{{#fooIcon}}{{>icon}}{{/fooIcon}}

We need a consistent way of embedding these. Right now the existence of two ways causes confusion in code review.

Developer notes

We discussed this in the CR session on 17th August 2017

As @pmiazga rightly pointed out in the TalkOverlay we create views in 3 different ways - template data e.g. headerButtons raw HTML (e.g.heading), using templatePartials and passing the options of a View class (footerAnchor).

There's also a 4th way (toHtmlString)

The ability to use template partials adds to this problem. We should standardise on one approach and stick to it.

Related: T149909

Related Objects
Search...

Status	Assigned	Task
Open	None	T158181 Aim for workflow equivalence for MediaWiki on desktop and mobile web
Declined	None	T144571 Mobile Media Viewer violates user settings
Open	Jdlrobson	T65504 Consolidate code for MediaViewer across desktop and mobile
Declined	None	T162210 [EPIC] Upstream MobileFrontend components to core and other extensions (tracking)
Duplicate	Jdlrobson	T66316 [EPIC] Move Nearby code to more suitable extension
Open	None	T49145 Formally deprecate jQuery UI after we've stopped using jQuery UI in extensions and core
Open	None	T100270 Replace use of jQuery UI and MW UI with OOUI across all Wikimedia-deployed extensions and core
Declined	None	T96202 [EPIC] Rewrite MobileFrontend frontend code in OOUI
Resolved	Jdlrobson	T166905 [EPIC] Talk about and improve our frontend code architecture
Duplicate	None	T104008 Have a consistent way of doing Views within Views

Event Timeline

Jdlrobson created this task.Jun 26 2015, 4:50 PM

Jdlrobson raised the priority of this task from to Needs Triage.

Jdlrobson updated the task description. (Show Details)

Jdlrobson added a project: Web-Team-Backlog-Archived.

Jdlrobson moved this task to Triaged but Future on the Web-Team-Backlog-Archived board.

Jdlrobson subscribed.

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 26 2015, 4:50 PM

Jdlrobson triaged this task as Low priority.Sep 16 2015, 6:57 PM

Jdlrobson added a parent task: T96202: [EPIC] Rewrite MobileFrontend frontend code in OOUI.

Jdlrobson edited projects, added MobileFrontend; removed Web-Team-Backlog-Archived.

Jdlrobson set Security to None.

MBinder_WMF added a project: Web-Team-Backlog-Archived.Apr 27 2016, 4:26 PM

dr0ptp4kt moved this task from Triaged but Future to Incoming on the Web-Team-Backlog-Archived board.Apr 27 2016, 4:36 PM

Jdlrobson added a project: Technical-Debt.May 11 2016, 4:53 PM

Jdlrobson moved this task from Incoming to Needs Prioritization on the Web-Team-Backlog-Archived board.

• bmansurov added a project: Reading-Web-Tech-Debt.Sep 21 2016, 6:31 PM

• bmansurov moved this task from Backlog to Improvements on the Reading-Web-Tech-Debt board.Sep 21 2016, 6:34 PM

MBinder_WMF edited projects, added Technical-Debt (RW-Tech-Debt); removed Technical-Debt.Oct 4 2016, 6:16 PM

ovasileva moved this task from Uncategorized to Improvements on the Technical-Debt (RW-Tech-Debt) board.Oct 4 2016, 7:47 PM

MBinder_WMF removed a project: Reading-Web-Tech-Debt.Oct 4 2016, 7:54 PM

Jdlrobson added a parent task: T166905: [EPIC] Talk about and improve our frontend code architecture.Jun 2 2017, 8:50 PM

Jdlrobson updated the task description. (Show Details)Jun 6 2017, 9:55 PM

What are the pros and cons of each? {{{icon}}} seems clear and concise.

Jdlrobson updated the task description. (Show Details)Aug 17 2017, 5:32 PM

Jdlrobson added a subscriber: pmiazga.

Using

{{{icon}}}

and

{{iconOptions}}{>icon}{{/iconOptions}}

are both flawed in that they only copy across the HTML and the Icon is stateless. Doing this means any event handlers need to be redefined by the thing using the class.

I think the approach most compatible with how we are doing things is to use the postRender method to update the template
e.g. template would look like this:

<div><Icon data-key='foo' /></div>

Code:

postRender: function () {
  this.$('.icon[data-key=foo]').replaceWith( new Icon( { name: foo } ) )
}

I think long term, we'd look to avoid partials altogether (or at least abandon the use of template inheritance)
e.g.

function TalkOverlayContent() {
}
TalkOverlayContent.prototype = {
  template: 'TalkOverlayContent.hogan'
}

var overlay = new Overlay( { content: new TalkOverlayContent(), header: new OverlayHeader() } );

Does this seem like a reasonable approach?

Jdlrobson edited projects, added MobileFrontend (MobileFrontend and MinervaNeue architecture); removed MobileFrontend.Jan 3 2018, 11:03 PM

Jdlrobson moved this task from Needs Prioritization to Tracking on the Web-Team-Backlog-Archived board.Feb 14 2018, 11:54 PM

Jdlrobson edited projects, added Web-Team-Backlog-Archived (Tracking); removed Web-Team-Backlog-Archived.

Jdlrobson moved this task from Untriaged to Discuss further on the Web-Team-Backlog-Archived (Tracking) board.Feb 15 2018, 12:47 AM

Jdlrobson raised the priority of this task from Low to Medium.Aug 30 2018, 1:33 AM

Jdlrobson moved this task from Backlog to Review and refactor components on the MobileFrontend (MobileFrontend and MinervaNeue architecture) board.

Jdlrobson lowered the priority of this task from Medium to Low.Nov 26 2018, 10:34 PM

Jdlrobson moved this task from Review and refactor components to Post-initial migration on the MobileFrontend (MobileFrontend and MinervaNeue architecture) board.

Jdlrobson closed this task as a duplicate of T209647: MFA: Allow our View's to support easy adding of children.