0

If you have a view file which you want to re-use for different pages which have, for example, slightly different page headings, is there a 'best approach' of the three below? (Considering separation of concerns, business/presentation logic, etc.)

As an example, if I have the same ‘What is your address’ page but for a number of different account types e.g. charity account, personal account, business account, etc. which need different page headings respectively.

(a) Pass in the specific page heading in the controllers

  • CharityAccountController: return h.view({ pageHeading: "What is the charity's registered address?"})
  • PersonalAccountController: return h.view({ pageHeading: "What is your address?"})
  • View file: <pageHeading>{{ pageHeading }}</pageHeading>

(b) Pass in an account type flag in the controller and have some conditional logic in the view to set the heading:

  • CharityAccountController: return h.view({ isCharityAccount: true })
  • PersonalAccountController: return h.view({ isPersonalAccount: true })
  • View file: <pageHeading> { if isCharityAccount } What is the charity's registered address? { else if isPersonalAccount } What is your address? { else … } </pageHeading>

(c) Use separate view files for each page, abstracting as much as possible to common 'partials'

There may also be other page elements specific to account types e.g. hint text, validation error messages. And certain elements may need to be shown/hidden depending on the account type.

  • It really depends on how many parameters have to be passed around, and how many can be grouped. – BobDalgleish Jun 3 at 22:26
0

You really have two things: a page and a reusable address component.

Each page should have its own view model, but each view model could hold a reference to an instance of a class that represents the address fields. That way you can create a shared template for the address fields used on all three pages, yet keep each page separate to reflect the fact they are different use cases.

Really it all comes back to favoring composition over inheritance. Composition is a great way to reuse code and keep loose coupling.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.