BackboneJS + Требуется плагин JS + Wookmark.js не работает

0

У меня есть приложение Backbone, связанное вместе с RequireJS. Теперь я хочу использовать плагин Wookmark https://github.com/GBKS/Wookmark-jQuery, но по какой-то причине я не могу его запустить. Поэтому я сделал следующее:

Мой config.js:

require.config({    

   deps: ['main'],

   paths: {
    jquery          : '../lib/jquery-2.1.0.min',
    underscore      : '../lib/lodash-2.4.1',
    backbone        : '../lib/backbone',
    layoutmanager   : '../lib/backbone.layoutmanager',
    handlebars      : '../lib/handlebars/handlebars-v1.3.0',
    imagesLoaded    : '../lib/jquery.imagesloaded',
    wookmark        : '../lib/wookmark.min'
  },

 shim: {
   backbone  : {
    deps   : ['jquery', 'underscore'],
    exports: 'Backbone'
  },
  handlebars: {
    exports: 'Handlebars'
  },
  layoutmanager: ['backbone']
}

});

Тогда в моем App.js у меня есть:

define([
'jquery',
'underscore',
'backbone',
'wookmark',
'imagesLoaded',
'layoutmanager',
'handlebars'
],

function ($, _, Backbone, wookmark, imagesLoaded) {
    // some code...

    $(function() {
        var tiles = $('#suptiles'),
                handler = $('li', $tiles),
                options = {
                    autoResize: true,
                    container: $('#supmain'),
                    offset: 10,
                    outerOffset: 15,
                    fillEmptySpace: true,
                    itemWidth: 280,
                    flexibleWidth: 500
                };

        $tiles.imagesLoaded(function() {
            $handler.wookmark(options);
        });
    });     

});

Затем в моем файле HTML я сделал:

<div id="supmain">
  <ul id="suptiles">
   <li>some image</li>
   <li>some image</li>
   <li>some image</li>
   <li>some image</li>
  </ul>
</div>

Я cna вижу в моей консоли, что wookmark и imagesloaded -plugins, но он не запускается. Кто-нибудь знает, что может быть проблемой здесь?

Заранее спасибо....

Теги:
requirejs
amd
backbone.js

2 ответа

0
Лучший ответ

Я решил это сам, просто сохраняя wookmark -plugin в RequireJS и помещая его в функцию afterRender в соответствующем View:

afterRender: function(){
    $('#suptiles li').wookmark({
       autoResize: true,
       container: $('#supmain'),
       offset: 10,
       outerOffset: 15,
       fillEmptySpace: true,
       itemWidth: 280,
       flexibleWidth: 500
   });
},

Спасибо за ответы!

1

Youre, вызывающий $tiles.imagesLoaded но $tiles isnt определен, а также $handler вы используете позже. Попробуй это:

$(function() {
    var tiles = $('#suptiles'),
            handler = $('li'),
            options = {
                autoResize: true,
                container: $('#supmain'),
                offset: 10,
                outerOffset: 15,
                fillEmptySpace: true,
                itemWidth: 280,
                flexibleWidth: 500
            };

    tiles.imagesLoaded(function() {
        handler.wookmark(options);
    });
});     

$ Является частью имени переменной, как и любой другой допустимый символ: $tiles и tiles относятся к разным переменным.

Кроме того, в документации к плагину Wookmark jQuery говорится об опции container:

the width of this element is used to calculate the number of columns, defaults to "window". For example $('myContentGrid'). Container should also have the CSS property "position: relative".

Кажется, что эта обновленная скрипка работает. Я добавил необходимый CSS и удалил часть , tiles объявления обработчика (что было для?).

  • 0
    Хм, к сожалению, это никак не повлияло ...: - /
  • 0
    Что произойдет, если вы вручную wookmark в консоли Javascript?
Показать ещё 9 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню