1

toastr が奇妙な動作を示しています。かなり見苦しい方法で表示されており、何もオーバーライドしていません。スタイリング方法に関するオプションはありませんが、それでもこの醜い通知が表示されます。

これは次のようになります。

私が話していることを示す画像へのリンク

私はrequireJSを介してtoastrを引っ張っています。それが重要かどうかはわかりません。

ロガー.js

define(['durandal/system', 'toastr'], function (system, toastr) {
    var logger = {
        log: log,
        logError: logError
    };

    return logger;

    function log(message, data, source, showToast) {
        logIt(message, data, source, showToast, 'info');
    }

    function logError(message, data, source, showToast) {
        logIt(message, data, source, showToast, 'error');
    }

    function logIt(message, data, source, showToast, toastType) {
        source = source ? '[' + source + '] ' : '';
        if (data) {
            system.log(source, message, data);
        } else {
            system.log(source, message);
        }
        if (showToast) {
            if (toastType === 'error') {
                toastr.error(message);
            } else {
                toastr.info(message);
            }

        }

    }
});

main.js

requirejs.config({
    baseUrl: '../Scripts',
    paths: {
        'services': '../App/services',
        'viewmodels': '../App/viewmodels',
        'views': '../App/views',
        'config': '../App/config',
        'durandal': 'durandal',
        'plugins': 'durandal/plugins',
        'transitions': 'durandal/transitions',
        'text': 'text',
        'toastr': 'toastr'
    }
});

define('jquery', function () { return jQuery; });
define('knockout', ko);

define('main', ['durandal/system', 'durandal/app', 'durandal/viewLocator', 'plugins/router', 'services/logger'], function (system, app, viewLocator, router, logger) {
    //>>excludeStart("build", true);
    system.debug(true);
    //>>excludeEnd("build");

    app.title = 'Prepare to die';

    app.configurePlugins({
        router: true,
        dialog: true,
        widget: true
    });

    app.start().then(function () {
        // Router will use conventions for modules
        // assuming viewmodels/views folder structure
        router.makeRelative({ moduleId: 'viewmodels' });

        // Replace 'viewmodels' in the moduleId with 'views' to locate the view.
        // look for partial views in a 'views' folder in the root.
        viewLocator.useConvention();

        // Show the app by setting the root view model for our application with a transition.
        app.setRoot('viewmodels/shell', 'entrance');

        // Override bad route behavior to write to
        // console log and show error toast
        router.handleInvalidRoute = function (route, params) {
            logger.logError('No route found', route, 'main', true);
        };
    });
});

shell.js

define(['durandal/system', 'services/logger', 'plugins/router', 'config'],
    function (system, logger, router, config) {

        var shell = {
            activate: activate,
            router: router
        };

        return shell;

        function activate() {
            logger.log('Application is Loaded!', null, system.getModuleId(shell), true);
            router.map(config.routes).buildNavigationModel();
            return router.activate();
        }
});

shell.html

<div>
    <header>
        <!-- ko compose: {view: 'navigation'} -->
        <!-- /ko -->
    </header>
    <section id="content" class="main container-fluid">
        <!-- ko compose: {model: router.activeItem, afterCompose: router.afterCompose} -->
        <!-- /ko -->
    </section>
</div>
4

2 に答える 2

0

サイドバーとして、Durandal の下で toastr を使用しています。John Papa の著書から、サードパーティのフレームワークをグローバルにロードする必要がある一方で、独自のモジュールをモジュールとしてロードする必要があると彼が感じていることを知っています。考えるだけの食べ物です。サードパーティ フレームワークのグローバル モデルに切り替えることで、多くの難解な問題が解消されたと言えます。

于 2014-04-23T04:42:29.717 に答える