Toastr 未按应有的方式显示答案

【问题标题】：Toastr is not displaying the way it shouldToastr 未按应有的方式显示
【发布时间】：2014-04-22 19:10:52
【问题描述】：

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>

【问题讨论】：

先生，我现在就做，谢谢您的时间
开发者控制台没有显示错误？
不，先生，我处于调试模式，但没有任何错误的跟踪
我在 Durandal 中将 toastr 与 RequireJS 一起使用，由于需要，我没有任何问题，但我将 jQuery 作为一个部门。我首先将它添加到 shim，然后查看 CSS 是否包含在您的 index.html 中。

标签： requirejs toastr

【解决方案1】：

作为侧边栏，我们在 Durandal 下使用 toastr，我从 John Papa 的著作中了解到，他认为第三方框架应该全局加载，而我们自己的模块应该模块化加载。只是思考的食物。我可以说，切换到第三方框架的全局模型消除了很多深奥的问题。

【讨论】：

【解决方案2】：

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

toastr.options.toastClass = 'toastr';

【讨论】：