无法让砌体与 RequireJS 一起工作

Unable to get Masonry working with RequireJS

本文关键字：RequireJS 一起 工作      更新时间：2023-09-26

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

编辑：可能与此问题有关。

主.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();
});

应用.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;
});

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

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

您可以在此处下载bridget：https://github.com/desandro/jquery-bridget

然后你可以包括一个运行桥接，它应该工作正常

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

希望对您有所帮助！

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

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;
});
相关文章：