Implementazione di AMD in JavaScript utilizzando RequireJS

Question

Sono totalmente nuovo a RequireJS, quindi sto ancora cercando di orientarlo. Avevo un progetto che funzionava perfettamente, quindi ho deciso di utilizzare RequireJS, quindi l'ho incasinato :)

In questo modo, ho alcune domande su RequireJS e su come capire tutto. Ho la gerarchia dei file all'interno della cartella script:

Ho la seguente riga all'interno del mio _Layout.cshtml di file:

<script data-main="@Url.Content("~/Scripts/bootstrap.js")" src="@Url.Content("~/Scripts/require-2.0.6.js")" type="text/javascript"></script> 

Ed ecco il mio file bootstrap.js:

require.config({ 
    shim: { 
     'jQuery': { 
      exports: 'jQuery' 
     }, 
     'Knockout': { 
      exports: 'ko' 
     }, 
     'Sammy': { 
      exports: 'Sammy' 
     }, 
     'MD': { 
      exports: 'MD' 
     } 
    }, 
    paths: { 
     'jQuery': 'jquery-1.8.1.min.js', 
     'Knockout': 'knockout-2.1.0.js', 
     'Sammy': 'sammy/sammy.js', 
     'MD': 'metro/md.core.js', 
     'pubsub': 'utils/jquery.pubsub.js', 
     'waitHandle': 'utils/bsynchro.jquery.utils.js', 
     'viewModelBase': 'app/metro.core.js', 
     'bindingHandlers': 'app/bindingHandlers.js', 
     'groupingViewModel': 'app/grouping-page.js', 
     'pagingViewModel': 'app/paging-page.js' 
    } 
}); 

require(['viewModelBase', 'bindingHandlers', 'Knockout', 'jQuery', 'waitHandle', 'MD'], function (ViewModelBase, BindingHandlers, ko, $, waitHandle, MD) { 
    BindingHandlers.init(); 

    $(window).resize(function() { 
     waitHandle.waitForFinalEvent(function() { 
      MD.UI.recalculateAll(); 
     }, 500, "WINDOW_RESIZING"); 
    }); 

    var viewModelBase = Object.create(ViewModelBase); 
    ko.applyBindings(viewModelBase); 
    viewModelBase.initialize(); 
}); 

    require(['viewModelBase', 'bindingHandlers', 'Knockout'], function (ViewModelBase, BindingHandlers, ko) { 
     BindingHandlers.init(); 

     var viewModelBase = new ViewModelBase(); 
     ko.applyBindings(viewModelBase); 
     viewModelBase.initialize(); 
    }); 

Quindi ho implementato i miei moduli utilizzando la funzione define. Un esempio è il modulo pubsub:

define(['jQuery'], function ($) { 
    var 
     publish = function(eventName) { 
      //implementation 
     }, 
     subscribe = function(eventName, fn) { 
      //implementation 
     } 
    return { 
     publish: publish, 
     subscribe: subscribe 
    } 
}); 

Ho praticamente fatto la stessa cosa con tutti i miei file javascript. Si noti che il file effettivo contenente il modulo pubsub è jquery.pubsub.js all'interno della cartella /Scripts/utils. Questo vale anche per altri moduli.

UPDATE:

Ok ho aggiornato il mio file di bootstrap ora che ci penso capisco cosa uno spessore e perché dovrei usarlo. Ma non funziona ancora per me, anche se ho anche dichiarato tutti i percorsi che, a mio avviso, mi avrebbero creato problemi nel farli stare bene. Il fatto è che non entra nemmeno nella mia callback require all'interno del file bootstrap, quindi credo di avere ancora un problema nel modo in cui sto configurando o definendo i miei moduli?

Answer 1

Bene, per esempio, se si intende utilizzare una libreria non-amd, ad esempio jQuery, con require e la funzione jQuery è passata al callback, è necessario specificare uno shim con le esportazioni nella configurazione richiesta, come so:

require.config({ 
    shim: { 
     jQuery: { 
      exports: '$' 
     } 
    }, 
    paths: { 
     jQuery: 'jquery-1.8.1.min.js', 
    } 
}); 

A parte questo, non sono sicuro di aver capito qual è il problema.

Answer 2

Se si utilizza ASP.NET MVC dare un'occhiata a RequireJS for .NET

Il RequireJS per .NET progetto si integra perfettamente il quadro RequireJS con ASP.NET MVC sul lato server utilizzando i file di configurazione XML, gli attributi di filtro azione, un controller di base per le classi di ereditarietà e helper.

Answer 3

Non ho capito completamente qual è il problema. Ma se si riferisce a librerie JS di essere caricato con require.js allora questo file di avvio funziona per me:

require.config({ 
    paths: { 
     "jquery": "/scripts/jquery-1.8.2", 
     "sammy": "/scripts/sammy-0.7.1" 
    }, 
    shim: { 
     "sammy": { 
      deps: ["jquery"], 
      exports: "Sammy" 
     } 
    } 
}); 

require(["jquery", "sammy"], function ($) { 
    $(document).ready(function() { 
     alert("DOM ready"); 
    }); 
}); 

prega, nota, non c'e' js nei percorsi.

BTW, se si utilizza MVC 4, non è necessario @ Url.Content in 'href' e 'src'.