BackboneJS + Require JS + Wookmark.js 插件不起作用答案

【问题标题】：BackboneJS + Require JS + Wookmark.js plugin not workingBackboneJS + Require JS + Wookmark.js 插件不起作用
【发布时间】：2014-06-29 14:43:24
【问题描述】：

我有一个与 RequireJS 绑定在一起的 Backbone 应用程序。现在我想使用 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 插件都已加载，但它没有被触发。有谁知道这里可能是什么问题？

提前谢谢....

【问题讨论】：

标签： jquery backbone.js requirejs amd

【解决方案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 部分（这是做什么用的？）。

【讨论】：

嗯，不幸的是，这根本没有任何效果... :-/
如果您在 Javascript 控制台中手动调用 wookmark 会发生什么？
当我 console.log(wookmark) 什么都没有发生！所以显然插件没有被触发......！？！？
对不起，我应该更准确。我建议您手动执行应该在脚本中执行的代码。您几乎可以复制和粘贴变量定义。然后试试handler.wookmark(options) 看看会发生什么。
好的，我更新了答案，提供了一个工作小提琴的链接以及修复它的说明。

【解决方案2】：

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

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

感谢您的众多回复！

【讨论】：