How to use Noty jQuery plugin?

[Romain Séguy]

Hello,

I have tried several methods to include this plugin http://ned.im/noty/ into my app but I have not been able to use it successfully despite all my attempts.

Basically I've managed to include the plugin js file appending an entry to RequireJs main.js config and I fiddled around from there without result. I always get some error that noty is not defined/recognized when calling variations of $.noty

I hope someone know what is the straightforward method to include and use such a plugin.

[fpw...@gmail.com]

What you have to do is make sure noty is being loaded by require.  I am using the Jquery.Growl plugin for my messaging and this is how I got it to work.

1)  In your main.js file add it to the path config like so: 

require.config({

    paths: {

        "text": "../../Scripts/text",

        'durandal': '../../Scripts/durandal',

        'plugins': '../../Scripts/durandal/plugins',

        'jquery': '../../Scripts/jquery-1.9.1',

        'j.noty': 'js/noty/packaged/jquery.noty.packaged.min.js'

    },

    urlArgs: 'v=1.0.0.0'

});

Make sure your path to the files is correct, I just copied the path from their website.

2) to add some encapsulation create a module with no view that will be used to display your messages, your other modules can reference this module when they need to display messages, I have a folder called services where I put these.

define(['durandal/system',

        'jquery',

        'j.noty'],

    function (system, $, noty) {

        var msgbox = {

            display: display

        };

        return msgbox;

        function display(message) {

           var n = noty({text: message});

        }

    });

3) reference your 'msgbox' or whatever you decide to call it module from any module that you want to show messages in

define(['durandal/system', 'msgbox'], function(system, msg) {

var vm = {

 

     buttonClick: doWork;

};

function doWork()

{

msg.display('My Message');

};

});

From my experience, all three steps are required.  1 tells required where to load noty from.  2 informs require that you want it to be loaded, and 3 lets you use it.  You could also just add j.noty to your modules with views directly and not have the inner object but in case you ever decide to change out noty for something else the step 2 will really make it easier.  You also may want to make sure how noty is used and set it up property, for step 2 I just copied the code from their website.  I have not used noty before so I am unsure if it acts as a singleton or if you need to keep a reference around.

I learn this from watching the pluralsight video from John Papa http://pluralsight.com/training/Courses/TableOfContents/single-page-apps-jumpstart