Durandal: creating a Knockout custom bindings module
I want to move all the custom bindings that I create with the .addBindingHandler composition into a module so that my method is main.js
clean. I moved them into a file lib/binding/binding.js
as shown below, created an alias binding
for the file in requirejs.config()
and replaced the calls with a call require('binding')
. However, this code throws an error Module name "binding" has not been loaded yet for context: _. Use require([])
. How do I change this code to work correctly?
calling app.start ()
app.start().then(function() {
//Replace 'viewmodels' in the moduleId with 'views' to locate the view.
//Look for partial views in a 'views' folder in the root.
viewLocator.useConvention();
require('binding');
//PRIOR: var composition = require('durandal/composition');
//PRIOR: composition.addBindingHandler() calls that now live in lib/binding/binding.js.
$.when(config.init()).then(function () {
//Show the app by setting the root view model for our application with a transition.
app.setRoot('viewmodels/shell');
})
});
lib / binding / binding.js (probably irrelevant, but included for completeness)
; (function (define) {
define(['durandal/composition', 'knockout', 'datepicker'], function (composition, ko, datepicker) {
// The following code originally resided in main.js after this declaration:
// var composition = require('durandal/composition');
// hidden: Inverse of 'visible'.
composition.addBindingHandler('hidden', {
update: function (element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
ko.bindingHandlers.visible.update(element, function () { return !value; });
}
});
// datepicker: Reusable form element with date picker.
composition.addBindingHandler('datepicker', {
init: function (element, valueAccessor) {
var input = $("<input type=\"text\" class=\"form-control datepicker\" placeholder=\"MM/DD/YYYY\" />");
var span = $("<span class=\"input-group-addon\"><i class=\"fa fa-calendar\"></i></span>");
input.datepicker();
input.appendTo(element);
span.appendTo(element);
}
});
});
})();
source to share
I often just bind my bindings in an empty module that returns nothing -
define([],
function () {
// Convert any date to a MM-DD-YYYY format with moment.js
ko.bindingHandlers.Date = {
update: function (element, valueAccessor) {
var value = valueAccessor();
var date = moment(value());
var strDate = date.format('MM/DD/YYYY');
$(element).text(strDate);
}
};
});
Then just require it in your shell.js file
define(['services/bindings'], function (bindings) {
});
That's all you need to do. In a nutshell, you are just using a module to register custom bindings to a knockout instance.
source to share