Using multiple views and models in a widget

[ottoman]

Hi

Thanks for a great project!

Earlier versions of Aura allowed me to require the sandbox inside any view or model in a widget. So my widget could consist of several views and models all using the same sandbox.
define(['sandbox'], function(sandbox) { // use sandbox.mvc to extend models and views... });
Now, a widget is injected with the sandbox through the initialize method and I struggle to understand how to have a widget require other models/views. An example main.js based on a widget in aura-todos:
//main.js define(['./model'], function(Model) { return { type: 'Backbone', initialize: function() { this.model = new Model({sandbox: this.sandbox}); }, }; });

//model.js define(['backbone'], function(Backbone) { return Backbone.View.extend({ initialize: function() { this.sandbox.emit("something"); } }); });

Does this seem right? I feel like model.js should be extended from sandbox.mvc instead of requiring 'backbone'?

I feel like Im missing something. Any direction would be greatly appreciated. Thx again.

[sbellity]

Hi @ottoman, thanks for your question.

In earlier versions of Aura, the way the sandbox was made available to via define(['sandbox'], ...) was a little bit of a hack that did not allow to have real sandboxing between different instances of the same widget.

I'm not sure what the right solution is but,

1- I'm starting to feel that the sandbox.mvc thing is useless. It's not a real facade because if you use Backbone anyway, you cannot really swap it out for another lib.

2- If you have an extension that provides Backbone, I think that it's not that big a problem to require it from a file inside a widget. Sandboxing is here to provide APIs on top of your business logic, not necessarily on top of all vendor libs.

Another option would be to something like :

main.js

define(['./model'], function(ModelFactory) {
  return {
    initialize: function() {
      var Model = ModelFactory(this.sandbox);
    }
  }
});

model.js

define(function() {
  return function(sandbox) {
    return sandbox.mvc.Model.extend({ ... })
  }
});

Once again, I don't really have the right answer (yet ?), we need more use cases to define the best practices.

[addyosmani]

@ottoman I know it's been a while, but can you remember if the solution above was of help? If so, we can document it for others who run into the same issue.