Dependent scripts loaded with ltng:require (backbone with underscore)

Question

I'm trying to load backbone script which requires underscore script

<aura:application extends="force:slds">
      <ltng:require scripts="/resource/underscore,/resource/backbone"/>
</aura:application>

According to Salesforce documentation (and my successful tests with jquery and bootstrap...) :

The scripts are loaded in the order that they are listed.

For this example however, the script backbone seems to be loaded before underscore is completely done, which triggers this error :

Uncaught TypeError: Cannot read property 'extend' of undefined throws at /resource/backbone:3:4166

Is anyone able to understand what is happening here at what could be a workaround ?

Thank you !

Update :

It seems that Lightning is also using _(underscore) so maybe there is something blocked...

Update 6 oct 2016 :

locker service is definitely blocking something. No workaround for now except disabling LS.

Answer 1

ltng:require should be loading these libraries in sequence - the mechanism is very similar to how requirejs works to support async loading with dependency order preserved. The next script in the list is loaded after the onload event for the previous script in the list has fired which might be where the timing issue is coming from (e.g. if underscorejs is performing some form of lazy init via setTimeout etc) - although we have other customers using this combination I believe and none have reported this.

There is no use of underscore in Lightning.

What version of underscore and backbone are you using? Do you have a support case open with Salesforce on this already?

October 6 Update: OK I have identified the root cause (pun intended) and its this block of code in backbone that relies on window.self:

Currently SecureWindow.self is not implemented - but the good news is that the fix for this is already on its way to being released on (or near) October 18th. I'm verifying that this code works with that fix in place now and will post back here with my findings shortly.

Update #2 October 6th: Verified that this example is now working perectly under LS with the pending Winter'17 fixes due out around 10/18:

underScoreBackboneJQueryDemo.app

<aura:application>
    <ltng:require scripts="/resource/underscorejs, /resource/backbonejs, /resource/jquery_2_2_4" afterScriptsLoaded="{!c.init}"/>
    <div id="sidebar">Sidebar</div>
</aura:application>

underScoreBackboneJQueryDemo.app.controller.js

({
    init: function(component, event, helper) {
        var Sidebar = Backbone.Model.extend({
          promptColor: function() {
            var cssColor = prompt("Please enter a CSS color:");
            this.set({color: cssColor});
          }
        });

        window.sidebar = new Sidebar;

        sidebar.on('change:color', function(model, color) {
            $('#sidebar').css({background: color});
        });

        sidebar.set({color: 'white'});

        sidebar.promptColor();
    }
})

Answer 2

I disabled Locker Service in my org and it works fine. You can read a good article about Locker Service in [https://developer.salesforce.com/blogs/developer-relations/2016/04/introducing-lockerservice-lightning-components.html]