Application-level JavaScript examples
This section provides some useful examples for how you might use application-level JavaScript modules.
This first example adds a reusable Knockout custom binding that can be used across widgets:
define(
//-------------------------------------------------------------------
// DEPENDENCIES
//-------------------------------------------------------------------
['jquery', 'knockout', 'ccLogger'],
//-------------------------------------------------------------------
// Module definition
//-------------------------------------------------------------------
function($, ko, CCLogger) {
'use strict';
// A simple binding that highlights an element when it loses focus.
ko.bindingHandlers.highlight_on_blur = {
init: function (element, valueAccessor, allBindings, viewModel,
bindingContext) {
$(element).on('blur.demo.ko', function() {
$(this).css('background-color','yellow');
});
$(element).on('focus.demo.ko', function() {
$(this).css('background-color','white');
});
}
};
return {
onLoad : function() {
CCLogger.info("Loading Demo KO Bindings");
}
};
}
);
This example demonstrates how to create an application-level module with reusable methods or view models:
define(
//-------------------------------------------------------------------
// DEPENDENCIES
//-------------------------------------------------------------------
['jquery', 'knockout', 'ccLogger'],
//-------------------------------------------------------------------
// Module definition
//-------------------------------------------------------------------
function($, ko, CCLogger) {
'use strict';
return {
onLoad : function() {
CCLogger.info("Loading Demo Shared View Models");
},
doMessage : function() {
alert("Shared View Models");
},
viewModel : ko.observable({
firstName : ko.observable('Bob'),
surname : ko.observable('Test')
})
};
}
);