У меня есть приложение 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, но он не запускается. Кто-нибудь знает, что может быть проблемой здесь?
Заранее спасибо....
Я решил это сам, просто сохраняя wookmark
-plugin в RequireJS
и помещая его в функцию afterRender
в соответствующем View:
afterRender: function(){
$('#suptiles li').wookmark({
autoResize: true,
container: $('#supmain'),
offset: 10,
outerOffset: 15,
fillEmptySpace: true,
itemWidth: 280,
flexibleWidth: 500
});
},
Спасибо за ответы!
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
объявления обработчика (что было для?).
wookmark
в консоли Javascript?