0

phonegap、backbone.js、require.js を使用してアプリを構築しています。各テンプレートには同じナビゲーション メニューがあり、テンプレートの各ヘッダーには、メニューをスライド インおよびスライド アウトするためのボタンがあります。メニューは次のコードで表示されます。

$('#slide-menu-button').on("click", function (e) {
                var cl = document.body.classList;
                if (cl.contains('left-nav')) {
                    cl.remove('left-nav');
                } else {
                    cl.add('left-nav');
                }
    });

このコードをすべてのビューに配置する必要はありません。現在表示されているテンプレートに関係なく、常に実行されるように、このコードをどこに置くことができますか? 現在、次のような app.js に入れています。

require.config({

    baseUrl: 'js/lib',

    paths: {
    app: '../app',
    tpl: '../tpl'
    },

    shim: {
    'backbone': {
        deps: ['underscore', 'jquery'],
        exports: 'Backbone'
    },
    'underscore': {
        exports: '_'
    }
    }
});

require(['jquery', 'backbone', 'app/router'], function ($, Backbone, Router) {

    var router = new Router();

    $("body").on("click", ".back-button", function (event) {
    event.preventDefault();
    window.history.back();
    });

    Backbone.history.start();

    $('#slide-menu-button').on("click", function (e) {

                var cl = document.body.classList;
                if (cl.contains('left-nav')) {
                    cl.remove('left-nav');
                } else {
                    cl.add('left-nav');
                }
    });

});

ただし、これはロードされた最初のテンプレートでのみ機能し、他の後続のテンプレートでは機能しません...

4

2 に答える 2

1

バックボーンは、このタイプのイベントとは何の関係もありません。リスナーを要素にバインドしてから<body>、セレクターを追加できます。詳細については、jQuery のドキュメントを参照してください: http://api.jquery.com/on/

$('body').on("click", "#slide-menu-button", function (e) {

    var cl = document.body.classList;

    if (cl.contains('left-nav')) {
        cl.remove('left-nav');
    } else {
        cl.add('left-nav');
    }
});
于 2013-11-06T15:15:09.720 に答える
1

ページの読み込み時に #slide-menu-button のクリック イベントを作成しているように見えるため、既にレンダリングされた要素のクリック イベントのみが登録されます。以下を使用して、後で DOM にレンダリングされないものを含め、すべての要素にイベントを適用できます。

$( "body" ).on( "click", "#slide-menu-button", function( event ) {
    event.preventDefault();
    window.history.back();
});

http://api.jquery.com/on/を参照してください。

于 2013-11-06T15:08:57.860 に答える