1

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);
        };
    });
});

外壳.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();
        }
});

外壳.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 回答
0

一个快速的解决方法是执行以下操作:

toastr.options.toastClass = 'toastr';

于 2020-03-12T16:29:50.650 回答