Shared view model with multiple views

Story:

I’d like to have a view model to implement logic in rendering files/photos. I’d like to re-use this viewmodel to utilize different types of views:

  1. List view - with small icons and text/etc
  2. Gallery view - with larger thumbnails and smaller text, etc.

Thoughts:

I understand there’s compose which could help with this but I’m not sure how to separate out the modules so that I can dynamically swap in a different view based on a select value. For instance if the value of my select dropdown is list I’d like to render view #1 and if its gallery then I’d like to render number 2.

Any thoughts or suggestions would be appreciated.

1 Like

Hope this dumber gist is self-explanatory
https://gist.dumber.app/?gist=edc5656d2e5bfeffe2adfd6e280d9a2a

but I’m not sure how to separate out the modules

  • create list.html (can create separate view model for them if wanted, cf docs (click) for activate() hook)

so that I can dynamically swap in a different view

  • if.bind your <compose>'s

based on a select value.

  • bind the select value

2 Likes

This makes perfect sense! Thank you! Its so simple. I forked your example with a little more of a use case as to what I’m trying at, and this is basically it:

https://gist.dumber.app/?gist=dd8c30d25d3d9e5744f60c5e4ca6dc4c

2 Likes