砌体不能在ES6中使用jQuery？

ES6：

'use strict'; 

import $ from 'jquery'; 
import Masonry from 'masonry-layout'; 

class Grid { 
    loadMasonry() { 
     window.addEventListener("load",() => { 
      $('.grid').masonry({ 
       // options 
       itemSelector: '.grid-item', 
       percentPosition: true, 
       // gutter: 10, 
       // columnWidth: 200 
      }); 
     }); 
    } 
}

我有这样的错误：

Grid.js:9 Uncaught TypeError: (0 , _jquery2.default)(...).masonry is not a function

我与故宫以下安装了其guide：

npm install masonry-layout

任何想法，为什么，以及如何解决这个？

编辑：

这是我如何调用类：

import Grid from './Grid'; 

document.addEventListener("DOMContentLoaded", function(event) { 
    var g = new Grid(); 

    g.loadMasonry(); 
});

来源

2016-10-10 laukok

所以你创建了一个类。你接下来做了什么？在哪里，何时以及如何实例化它？ – zerkms

@zerkms它与香草js实际上工作，但不与jQuery。请参阅我上面的编辑。谢谢。 – laukok

使用它作为一个jQuery插件需要更多的设置：你需要安装一个jquery-bridget库。

然后，这里是如何从文档页面将其结合在一起的样本代码：

var $ = require('jquery'); 
var jQueryBridget = require('jquery-bridget'); 
var Masonry = require('masonry-layout'); 
// make Masonry a jQuery plugin 
jQueryBridget('masonry', Masonry, $); 
// now you can use $().masonry() 
$('.grid').masonry({ 
    columnWidth: 80 
});

参考文献：

http://masonry.desandro.com/extras.html#webpack

来源

2016-10-10 04:21:22 zerkms

感谢您的回答。它现在有效！ – laukok

砌体不能在ES6中使用jQuery？

回答

相关问题