BackboneJS + JS要求+ Wookmark.js插件不工作

问题描述

我有一个主干应用与RequireJS绑定在一起。现在我想用Wookmark插件但由于某些原因，我不能让它运行。所以，我做了以下内容：

I have a Backbone App bound together with RequireJS. Now I want to use the Wookmark plugin https://github.com/GBKS/Wookmark-jQuery but for some reason I cant get it running. So I did the following:

我的config.js：

My 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我有：

Then in my App.js I have:

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文件我所做的：

Then in my HTML file I did:

<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 -plugins被加载，buut它不得到触发。有谁知道什么可能是这里的问题？

I cna see in my console that both the wookmark and imagesloaded-plugins are loaded, buut it doesnt get triggered. Does anyone know what might be the issue here?

在此先感谢....

推荐答案

我只需保持解决它自己的 wookmark -plugin在 RequireJS设置，并在相关视图将其放置在一个一个AfterRender 功能：

I solved it myself by simply keeping the wookmark-plugin settings in RequireJS and by placing it in an afterRender function in the relevant View:

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

感谢尽管许多答复！

Thanks for the many responses though!

这篇关于BackboneJS + JS要求+ Wookmark.js插件不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！