Dynamically defining get functions as views.

[c4lliope]

Hello! I'm glad to be asking help from some incredible programmers here.
I really like using your library, so I hope I can receive some clarity on my problem.

I am building a framework for models and views, which heavily relies on MST as a base layer.
My library loads in React template files dynamically and attaches them to MST models as views.

So, given a BaseModel and a template file called display,
I have tried a few options to try to attach a view function called display to the model.

In these examples, you can assume that the render function
properly renders a template file given a model name and view name.

  var BaseModel = types.model({})
  var displays = ["display"]

// Option A: runs properly, only the views are regular functions and not getters.
  var displayable = types
    .model({})
    .views(self => {
      var views = {}

      displays.forEach(display => {
        views[display] = () => render(self, BaseModel.name, display)
      })

      return views
    })

  var composed = types.compose(BaseModel, displayable)
  composed.display() //=> renders the view.

// Option B: the getters from `views` don't get absorbed into the new composed model.
  var displayable = types
    .model({})
    .views(self => {
      var views = {}

      displays.forEach(display => {
        Object.defineProperty(views, display, {
          get: function() { return render(self, BaseModel.name, display) }
        })
      })

      return views
    })

  var composed = types.compose(BaseModel, displayable)
  composed.display //=> undefined

// Option C: `Object.assign` copies over the getter's values and not the getter function definition.
  var displayable = types
    .model({})
    .views(self => {
      var views = {}

      var getters = displays.map(display => ({
        get [display]() { return render(self, BaseModel.name, display) }
      }))
      views = Object.assign({}, ...getters)
  })

  var composed = types.compose(BaseModel, displayable)
  composed.display //=> Error: [mobx-state-tree] A view member should either be a function or getter based property

Can anyone recommend other approaches to getting a dynamically defined view set up in a composed model?
Much obliged.

[c4lliope]

I've been going ahead with the first code option I listed here –
using regular functions instead of getter functions –
which has the added benefit of being able to pass in arguments to the view.