2

編集4

Foundation 3（パッケージから）で定義されたモジュールがありますapp.js：

(function($, window, undefined) {
    'use strict';

    var $doc = $(document), Modernizr = window.Modernizr;

    $(document).ready(function() {
        $.fn.foundationAlerts ? $doc.foundationAlerts() : null;
        // ...
        $.fn.foundationClearing ? $doc.foundationClearing() : null;

        $('input, textarea').placeholder();
    });
    // touch support detction is omitted
})(jQuery, this);

私はそれを次の形式に解釈しようとしました：

BOOTSTRAP.JS

require.config({
    paths: {
        // other paths then..
        'foundation': '../libs/zurb'
    },
    shim: {
        'foundation/jquery.foundation.topbar': { deps: ['jquery'] },
        'foundation/jquery.foundation.accordion': { deps: ['jquery'] },
        // ..all that stuff..
        'foundation/jquery.placeholder': { deps: ['jquery'] }
    }
});

require(['domReady', 'app'], function(domReady, app) {
    domReady(function() {
        app.initialize();
    });
});

APP.JS

まあ..これは期待どおりに機能しないことがわかりました：

define(
    [
        'jquery',
        'underscore',
        'backbone',
        'routing/AppRouter',
        'foundation/modernizr.foundation',
        'foundation/jquery.foundation.accordion',
        // all that foundation scripts...
        'foundation/jquery.placeholder'
    ],
    function($, _, Backbone, AppRouter) {
        return {
            initialize: function() {
                var $doc = $(document);

                // these things fail
                $.fn.foundationAccordion ? $doc.foundationAccordion() : null;
                // ...
                $.fn.placeholder ? $('input, textarea').placeholder() : null;

                // this works great!
                $('#slider').orbit();

                // router/controller initialization
                AppRouter.initialize();
            }
        };
    }
);

ページが読み込まれると、foundation'sUI要素がまったく機能しないことがわかります（アコーディオンはパネルを拡張しませんなど）。

$(document).foundationAccordion()Chromeコンソールに入ると（その時点でページが読み込まれていました） UI elements、ページで有効になりました。

ヘルプ！！

4

3 に答える 3

2

イニシャライザーをトリガーするときに、ファンデーションプラグインでスパイスを加えたいすべてのDOM要素が既にメインDOMツリーにあることを100％確認してください。バックボーンとテンプレートを使用してインターフェースを動的に作成しているように見えますが、Foundationはこの種のアプローチを念頭に置いて準備されていないようです。コードを見ると、静的ページよりも動的な1ページのアプリをターゲットにしているように見えます。

Foundationの使用の専門家ではありませんが、ルーターの初期化後にFoundationスクリプトの初期化を移動しようとします。ここでは、最初のビューがレンダリングされて、想定を確認します。アプリ全体で自動的に機能するわけではなく、基盤コンポーネントを使用して動的に新しいビューを再描画または作成するたびに、少なくとも一部のスクリプトをdom要素に再適用する必要があります。アプリのライフサイクルの後半で動的に作成される要素には適用されません。

一部のスクリプトはドキュメントからの委任を使用しており、アラートコンポーネントのように常に機能するはずですが、たとえばアコーディオンのような他のスクリプトは、アコーディオン要素（必須accordionクラス）がDOMツリーに挿入された後に呼び出されない限り機能しません。バックボーンビューがメインDOMツリーに挿入される前は、異なるセレクターを持つ要素または分離されたDOMノードの要素へのアコーディオン動作のアタッチをサポートしないFoundationプラグインを変更しない限りカウントされません。

すべてのFoundationプラグインのソースファイルを調べて、それらがどのように機能するか、および実装品質が私がざっと見たものとはかなり異なるため、1ページのアプリのコンテキストでそれらを飼いならす方法を確認することをお勧めします。彼らのgithubでそれをチェックしてください。

于 2012-11-30T08:05:51.233 に答える
1

exportsAMD以外のモジュールの場合は、シムでを明示的に指定する必要があります。これらのファイルの現在の内容がわからないため、ローダーコードを見ただけでは理解するのが少し難しいです。簡単に言うと、.js拡張機能が定義されていないので、AMDがすでに定義されていない限り、拡張機能を含むフルパスを指定する必要があります。

requirejsは、モジュールの場合にのみコールバックに引数を渡します。そうでない場合は、グローバルにアクセスする必要があります。define非モジュールごとに必要な場合は、手動でsを実行できますが、それは目的を無効にします。require

于 2012-12-05T01:31:51.440 に答える
0

トムの答えを読み直した後、私はついにそれを手に入れました！これは完全な図ではありませんが、私が持っているものを共有します）

私のbootstrap.jsファイルが変更されました：

paths: {
    // things like json2, underscore, jquery, backbone are ommited..
    'fn': '../libs/zurb'
},
shim: {
    'fn/jquery.foundation.accordion': {
        deps: ['jquery'], exports: 'jQuery.fn.foundationAccordion'
    },
    // ...
    'fn/jquery.foundation.orbit': {
        deps: ['jquery'], exports: 'jQuery.fn.orbit'
}

そのため、財団の各スクリプトの内部を調べて、それらが何を持っているかを確認することは非常に役に立ちました。

それから私は次のように書くことができました：

define(['jquery', 'underscore', 'backbone'], function($, _, Backbone) {
    var AppRouter = Backbone.Router.extend({
        routes: {
            '': 'list',
            'products/page/:page': 'list'
        }
    });

    var renderSlider = function() {
        // pay attention here
        require(['views/SliderView', 'fn/jquery.foundation.orbit'], function(SliderView, orbit) {
            $('#slider-wrapper .twelve.columns').prepend(new SliderView().el);
            $('#slider').orbit();
        });
    };

    var renderProductsList = function(page) {
        require(['collections/ProductsList', 'views/ProductListView', 'fn/jquery.foundation.accordion'], function(ProductsList, ProductListView, foundationAccordion) {
            var p = page ? parseInt(page, 10) : 1;
            var productsList = new ProductsList();

            productsList.fetch({
                success: function() {
                    $("#content").html(new ProductListView({ model: productsList, page: p }).el);
                    // pay attention here
                    $(document).foundationAccordion();
                },
                error: function() {
                    console.log('error!');
                }
            });
        });
    }

    var initialize = function() {
        var appRouter = new AppRouter();

        appRouter.on('route:list', function(page) {
            renderSlider();
            renderProductsList(page);
        });

        Backbone.history.start();
    };

    return {
        initialize: initialize
    };
});

次に、これらすべてを次のようにラップしました。

define(['jquery', 'underscore', 'backbone', 'routing/AppRouter'], function($, _, Backbone, AppRouter) {
    return {
        initialize: function() {
            AppRouter.initialize();
        }
    };
});

出来上がり!!!

于 2012-12-17T13:57:17.043 に答える