Question

我正在尝试使用RequireJS将Masonry加载到我的应用程序中，但它会一直导致主干在我添加它时随时吐出“对象不是函数”错误。

修改：可能与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的情况下运行它的方法：

requirejs-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;
});

无法让砌体与RequireJS一起工作

2 个答案: