Question

我有一个与RequireJS绑定在一起的Backbone App。现在我想使用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>

我在我的控制台中看到wookmark和imagesloaded - 插件都已加载，但是它没有被触发。有谁知道这里可能出现什么问题？

提前致谢....

Answer 1

您正在呼叫$tiles.imagesLoaded，但未定义$tiles，您之后使用的$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".

This updated fiddle似乎正在发挥作用。我添加了必要的CSS并删除了处理程序声明的, tiles部分（那是为了什么？）。

Answer 2

我自己解决了这个问题，只需在wookmark中保留RequireJS - 插件设置，然后将其放在相关视图中的afterRender函数中：

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

感谢您的回复！

BackboneJS +需要JS + Wookmark.js插件不能正常工作

2 个答案: