Upgrading from a pre ara-express version

[philippemiguet]

Hi guys,

I fighting since this morning to rewrite and old widget with the new aura, but I'm not even able to declare my collection. I'm looking for example, but there's only example done with the pre aura-express version... In the old version it was like this:

define(['sandbox'], function(sandbox)
{
    "use strict";

    var BouquetModel = sandbox.mvc.Model({

        idAttribute: 'id',

        defaults:
        {
            name    :   '',
            description     : 'null'
        }

    });

    return BouquetModel;

});

Can someone show me how to write a simple widget which fetch data thanks to a Backbone collection with the new aura? I would like to keep the old folder structure (collections, models, templates, views)

And can anyone explain me what is this new way of writing a view?

define(['text!./templates/base.html'], function (baseTemplate)
{
    return {
        type: 'Backbone',

//      baseTemplate: this.sandbox.template.parse(baseTemplate),

        initialize: function ()
        {
            this.$el.html(baseTemplate);

            this.sandbox.emit('loaded');

            var loadedWidgets = this.sandbox.start('#divaccountssapp');

            console.log(loadedWidgets);
        }
    };

});

Where is the sandbox.mvc.View({ // your code });? Is it handled by Aura in the core?

[sbellity]

Hey @PetitPhilou

Actually, you don't have to explicitly call this.sandbox.start here. There is a html method on Aura's widgets that do exactly that :

https://github.com/aurajs/aura/blob/master/lib/ext/widgets.js#L43

As for Backbone, it's not included anymore in aura, here is an example for an Aura-Backbone extension. We have not published any "official" extensions for Aura yet, but we are working on that (this weekend ;))

(function() {
  var historyStarted = false;
  define({
    name: "Aura Backbone",
    require: {
      paths:  { backbone: 'backbone/backbone' },
      shim:   { backbone: { exports: 'Backbone', deps: ['underscore', 'jquery'] } }
    },

    initialize: function(app) {
      var Backbone = require('backbone');
      app.core.mvc =  Backbone;
      app.core.registerWidgetType('Backbone', Backbone.View.prototype);
      app.sandbox.mvc = {
        View: function(o) {
          return Backbone.View.extend(o);
        },
        Model: function(o) {
          return Backbone.Model.extend(o);
        },
        Collection: function(o) {
          return Backbone.Collection.extend(o);
        }
      };
    },

    afterAppStart: function(app) {
      if (!historyStarted) {
        app.core.mvc.history.start();
        historyStarted = true;
      }
    },

  })
})();

with that, your widget would probably look like :

define(['text!./templates/base.html'], function (baseTemplate) {
  return {
    type: 'Backbone',
    initialize: function () {
      this.html(baseTemplate);
    }
  };
});

[sbellity]

And, to expose your Backbone Models and Collections to the widgets, I would probably do something like that (from an extensions that has the responsibility of exposing your domain model to the Widgets...) :

define(['backbone', './models/my_model'], function(Backbone, MyModel) {

  // or...
  var BouquetModel = Backbone.Model.extend({
    idAttribute: 'id',
    defaults: {
      name: '',
      description: 'null'
    }
  });

  var BouquetCollection = Backbone.Collection.extend({
    model: BouquetModel,
    url: '/bouquets'
  });

  return function(app) {
    app.sandbox.mvc = app.sandbox.mvc || { models: {}, collections: {} };

    app.sandbox.mvc.models = _.extend(app.sandbox.mvc.models, {
      MyModel: MyModel,
      BouquetModel: BouquetModel
    });

    app.sandbox.mvc.collections = _.extend(app.sandbox.mvc.collections, {
      BouquetCollection: BouquetCollection
    });

  }
});

[addyosmani]

Thank you for posting those code samples, @sbellity. They're tremendously useful.

What we'll do as part if our migration guide is include these and possibly a guide taking the old Backbone-Aura examples and porting them to use the new core.

[sbellity]

Hey @PetitPhilou was it useful ? Did you manage to make it work ? Can we close this issue ?

[addyosmani]

@PetitPhilou Just wondering if you found any of the advice above helpful. We ask because we may use some of it as a basis for our upgrade guide for users on older versions of Aura. Thanks!