Тоастр не отображается так, как должен

toastr ведет себя странно — он отображается довольно уродливым образом, и я ничего не переопределяю. Никаких вариантов того, как стилизовать, не дается, но я все равно получаю это уродливое уведомление.

Вот как это выглядит:

Ссылка на изображение, показывающее, о чем я говорю

Я загружаю 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>

person Ibrahim Amin    schedule 22.04.2014    source источник
comment
Я сделаю это прямо сейчас, сэр, спасибо за ваше время.   -  person Ibrahim Amin    schedule 22.04.2014
comment
А консоль разработчика ошибок не показывает?   -  person rene    schedule 22.04.2014
comment
Нет, сэр, я в режиме отладки, но никаких следов ошибок нет.   -  person Ibrahim Amin    schedule 22.04.2014
comment
Я использую toastr в Durandal с RequireJS, и у меня нет никаких проблем с этим из-за требования, но я использую jQuery как отл. Я бы начал с добавления его в прокладку, а затем посмотрел, включен ли для него CSS в ваш index.html.   -  person MattSizzle    schedule 03.07.2014


Ответы (2)


В качестве боковой панели мы используем toastr под Durandal, и я знаю из работ Джона Папы, что он считает, что сторонние фреймворки должны загружаться глобально, а наши собственные модули должны загружаться модульно. Просто пища для размышлений. Могу сказать, что переход на глобальную модель для сторонних фреймворков избавил от многих эзотерических проблем.

person Community    schedule 23.04.2014

Быстрое обходное решение состоит в том, чтобы сделать следующее:

toastr.options.toastClass = 'toastr';

person Sagi    schedule 12.03.2020