fix materialize with AMD (Require.js)

[max1011]

look at the commits to see what changed, and if there is any problem contact me
here is what your js file (require.js) should look like

requirejs.config({
  paths: {
    'materialize': '../../bower_components/materialize/dist/js/materialize',
    'jquery': '../../bower_components/jquery/dist/jquery',
    'velocity': '../../bower_components/materialize/js/velocity.min',
    'hammerjs': '../../bower_components/materialize/js/hammer.min'
  },
  shim: {
    'materialize': {
      deps: ['jquery', 'hammerjs', 'velocity']
    }
  }
});


// Require both jquery and materialize (materialize will load other stuff that is needed)
require(['jquery', 'materialize'], function($) {

  $(function() {
    // Dom is ready
    // this is very important for some components like material_select

    // initialize some components (this is what i need, it can be anything)
    $('select').material_select();
    $(".button-collapse").sideNav();
    $('ul.tabs').tabs();

    // display the waves effect
    // waves is already loaded by materialize
    // just initialize it to make it work (if you don't it won't work)

  });

  // the dropdown is the first thing we need (and it doesn't load right away)
  // so we initialize it as soon as possible
  // if this causes an issue
  // move it to the "documnent ready" function
  $(".dropdown-button").dropdown();
});

[max1011]

this was only temporal solution, all the package should change to have a permanent solution

[malipula]

I also have this issue for a week now. I can't get it to work with my application. I am using AMD to load materialize but none of the controls work inside my views.

Here is my main.js file:

requirejs.config({
paths: {
'text': '../lib/require/text',
'durandal':'../lib/durandal/js',
'plugins' : '../lib/durandal/js/plugins',
'transitions' : '../lib/durandal/js/transitions',
'knockout': '../lib/knockout/knockout-3.1.0',
'jquery': '../lib/jquery/jquery-1.9.1',
'materialize': '../lib/materialize/js/materialize'ty,
'hammerjs': '../lib/materialize/js/hammer.min',
'velocity': '../lib/materialize/js/velocity.min'
},
shim: {
'materialize': {
deps: ['jquery','hammerjs','velocity']
}
}
});

define([
'durandal/system',
'durandal/app',
'durandal/viewLocator',
'jquery',
'bindings',
'materialize'
], function (system, app, viewLocator, $, bindings,materialize) {
//>>excludeStart("build", true);
system.debug(true);
//>>excludeEnd("build");

app.title = 'Durandal Samples';

//specify which plugins to install and their configuration
app.configurePlugins({
    router:true,
    dialog: true,
    widget: {
        kinds: ['expander']
    }
});

$('select').material_select();
$(".button-collapse").sideNav();
$('ul.tabs').tabs();

app.start().then(function () {
    bindings.init();
    viewLocator.useConvention();
    app.setRoot('shell');
});

});

In my browser I get the following:

Uncaught Error: Mismatched anonymous define() module: function (){return ea}

Please help.

Hamisi

[max1011]

@malipula try to use my repo: materialize-AMD