javascript - Unable to get Masonry working with RequireJS

Question

I'm trying to get Masonry loaded into my app using RequireJS, but it keeps causing backbone to spit out a "object is not a function" error anytime I add it.

Edit: possibly related to this issue.

main.js

require.config({
  paths: {
    jquery: 'lib/jquery-1.9.1',
    underscore: 'lib/underscore-1.5.2',
    backbone: 'lib/backbone-1.0.0',
    masonry: 'lib/masonry.pkgd'
  },
  shim: {
    backbone: {
      deps: ['underscore', 'jquery'],
      exports: 'Backbone'
    },
    underscore: {
      exports: '_'
    }
  }
});

require(['app'], function(App){
  App.initialize();
});

app.js

define([
  'jquery', 
  'underscore', 
  'backbone',
  'masonry',
  'collections/ideas',
], function($, _, Backbone, Masonry, IdeasCollection) {

  var IdeasView = Backbone.View.extend({
    el: $('#container'),
    initialize: function() {
    ...    
    },
    render: function(){
    ...
    }
  });

  return IdeasView;
});

Answer 1

要将 Masonry 用作 RequireJS 的 jQuery 插件，您需要运行 jQuery bridget。

检查文档： http: //masonry.desandro.com/appendix.html#requirejs

你可以在这里下载bridget： https ://github.com/desandro/jquery-bridget

然后你可以包含一个运行的bridget，它应该可以正常工作

define([
    'jquery'
    , 'underscore'
    , 'backbone'
    , 'config'
    , 'app'
    , 'jquery.masonry'
    , 'jquery.bridget'
], function ($, _, Backbone, Config, App, Masonry, bridget) {

   initialize : function () {

        bridget('masonry', Masonry);

   }

});

希望能帮助到你！

Answer 2

这是一种无需bridget即可运行它的方法：

需要js-config.js：

var config = {
    paths: {
        "lib-masonry": "Module/js/lib/masonry.pkgd.min"
    },
    shim: {
        "lib-masonry": {
            deps: ['jquery', 'jquery/ui']
        }
    }
}

然后在您要使用它的另一个模块中：

define([
    'jquery',
    'lib-masonry'
], function ($, Masonry) {
    $.widget('ModuleNamespace.containerMasonry', {
        options: {

        },
        _create: function() {
            var msnry = new Masonry('.grid', {
              itemSelector: '.grid__item',
              columnWidth: 200
            });
            // .. code
        }
    });

    return $.ModuleNamespace.containerMasonry;
});