Uncaught TypeError: Freewall is not a function in ractive

187 views Asked by At

in Server.js

var $ = require('jQuery')
var Freewall = require('freewall') 

var app = Ractive.extend({
  el: 'main'
})

 app = new app()
  layoutGrid()

function layoutGrid(){

  $.fn.freewalltize = function(opts) {
    if (!opts) opts = {};

    this.each(function() {
      var $el = $(this);
      var widthReference = $el.children().first().width();
      var wall = new Freewall(this);

      reset();
      imagesLoaded(this, reset);

      function reset() {
        wall.reset({
          selector: opts.selector || '.thumb',
          animate: false,
          cellW: 200,
          cellH: 'auto',
          fixSize: 1,
          gutterX: opts.gutterX || 20,
          gutterY: opts.gutterY || 20,
          onResize: function() {
            wall.fitWidth();
            wall.refresh();
          }
        });
        wall.fitWidth();
      }
    })
  }

  $('[freewall]').freewalltize();
}

HTML

 <div freewall>
     {{#items}}
      <div class="thumb">
       <img src=“{{img}}”/>
      </div>
    {{/items}}
    </div>

Using freewalljs and NodeJS with Ractive templates

Once I managed to make it work, but it didn't show any grid layout. After a while, freewall does not work. Then I saw on console.log: Uncaught TypeError: Freewall is not a function. I looked through and couldn't find why.

0

There are 0 answers