Toastr没有显示它应该的方式

Question

toastr显示出一种奇怪的行为 - 它以一种相当丑陋的方式显示，我并没有凌驾于任何东西之上。没有关于如何设计风格的选项，但我仍然收到这个丑陋的通知。

这就是它的样子：

我正在通过requireJS来解决问题;我不知道这是否重要。

logger.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>

Answer 1

就像侧边栏一样，我们在Durandal下使用toastr，我从John Papa的着作中知道他认为第三方框架应该全局加载，而我们自己的模块应该模块化加载。只是值得深思。我可以说，转换为第三方框架的全局模型消除了许多深奥的问题。

Answer 2

一种快速的解决方法是执行以下操作：

toastr.options.toastClass ='toastr';