【问题标题】:Uncaught Error: Script error for: isotope/js/layout-mode未捕获的错误:脚本错误:isotope/js/layout-mode
【发布时间】:2015-04-10 06:33:41
【问题描述】:

我需要使用(这是独立包)isotope.pkgd.js 和 packery-mode 作为我项目的 LayoutMode。我使用 require.js 在 AMD 中连接我的 js 东西。
下面是我的html代码:

<div class="container">
                <div class="section">
                    <header class="section-header">
                        <div class="pull-left">
                            <h3><span class="fa fa-image"></span>Photos</h3>
                        </div>
                    </header>
                    <div class="padded_content">
                        <div id="region-gallery" class="gallery js-isotope">
                            @foreach (IPhotosComponentMediaImage image in Model.Images)
                            {
                                ++count;
                                if (w60h40Nums.Contains(count))
                                {
                                    addClasses = " w60 h40 ";
                                }
                                else if (w40Nums.Contains(count))
                                {
                                    addClasses = " w40 ";
                                }
                                else if (w60nums.Contains(count))
                                {
                                    addClasses = " w60 ";
                                }
                                else
                                {
                                    addClasses = "";
                                }
                                <div class="gallery-item isotope-item @addClasses">
                                    <div class="inner lazy" data-original="@image.MediaImageUrl" alt="@image.MediaTourName" data-description="@image.MediaImageDescription"></div>
                                </div>
                            }
                        </div>
                    </div>
                </div>
            </div>

我的 RenderLayout.js

define([
    'domReady!',
    'jquery',
    'underscore',
    'backbone',
    'marionette',
    'event.aggregator',
    'app',
    'util/searchOptionsUtil',
    'util/UriUtil',
        'gallery-carousel',
        'isotope',
        'packery-mode'
], function (doc, $, _, Backbone, Marionette, EventAggregator, App, SearchOptionsUtil, UriUtil, gc,Isotope, pm) {
    var regionPhotosLayout = Backbone.Marionette.Layout.extend({
        el: $('#region-photos'),
        initialize: function () {
          var $container = $('.container');
           console.log($container);
            $container.isotope({
                    itemSelector: ".gallery-item",
                    layoutMode: "packery"
                });

            var gallery = $("#region-gallery");
            //Modal carousel
            //var gallery = $("#region-gallery");

            gallery.galleryCarousel({
                imgSelector: ".inner",
                imgSrcAttr: "data-original"
            }); 
        }
    });

    return regionPhotosLayout;
});

所以当我运行我的代码时。我收到以下错误,它无法找到此文件 layout-mode.js。我不知道为什么会出现砌体错误。我试图在这里使用打包模式。此外,我们是否必须专门添加 isotope 正在寻找的这个 layout-mode.js。我尝试查找,但没有找到任何可以下载的同名文件。

GET http://local.gocollette.com/js/libs/isotope/isotope.pkgd.min/js/layout-mode.js 
Uncaught Error: Script error for: isotope/js/layout-mode
Uncaught TypeError: Cannot read property 'masonry' of undefined

提前谢谢你。希望能找到解决办法。 谢谢, 卡斯图里

【问题讨论】:

    标签: requirejs jquery-isotope packery


    【解决方案1】:

    isotope.pkgd.js中不包含packery布局模式,必须单独安装。这是我认为的layout-mode.js。

    下载地址为here

    【讨论】:

    • 我已经单独下载了包装布局。并将其包含在 requireJs 中并在 renderLayout 页面中使用。我是否以错误的方式包含它?
    • 我是否需要初始化 renderlayout.js 中包含的打包模式。如果是,我该怎么做?
    • 你看到这个reference了吗?尤其是“不包含的布局模式”部分,你的布局当然会很包装。
    • 如您所见,我正在做与链接中建议的相同的事情。
    • 我对 require.js 不是很满意,但我没有看到“要将 Isotope 用作带有 RequireJS 和 isotope.pkgd.js 的 jQuery 插件,您需要运行 jQuery bridget”。此外,布局模式应更改为您的打包脚本的名称。 (脚本错误:isotope/js/layout-mode)
    猜你喜欢
    • 2017-03-30
    • 1970-01-01
    • 2019-07-26
    • 2019-07-16
    • 1970-01-01
    • 2014-01-29
    • 1970-01-01
    • 1970-01-01
    • 2015-08-14
    相关资源
    最近更新 更多