Ve l'avevo detto che KnockoutJs è fantastico? Forse si, ma ve lo ridico.
Il grado di estensibilità che ci offre è veramente senza limiti. Grazie alla struttura di binding che hanno creato infatti, è possibile aggiungere i propri binding, così da estendere le operazioni che si possono fare su delle proprietà osservabili.
Per capirci meglio, oltre ad utilizzare i vari binding di default tipo:
<span data-bind="text: VariabileOsservabile" />
Abbiamo la possibilità di creare un nostro binding personalizzato per eseguire particolare azioni sull'elemento HTML in cui è specificato il binding, tramite l'espressione attribuita al binding stesso (che può essere semplicemente una proprietà osservabile o un'espressione più complessa).
<span data-bind="peppe: VariabileOsservabile" />
La documentazione per utilizzare questa tecnica la trovate qua:
http://knockoutjs.com/documentation/custom-bindings.html
Ecco quindi che qualche tempo fa, all'interno di una mia applicazione, avevo la necessità di far inserire all'utente finale una data e volevo utilizzare il date picker di JQueryUI.
Creando un nuovo binding personalizzato ed associandolo ad una variabile osservabile, è stato un gioco da ragazzi.
window.D4S = window.D4S || {};
D4S.ViewModel = function() {
var self = this;
self.Date = ko.observable(new Date());
self.ResetDate = function() {
self.Date(new Date());
};
};
ko.bindingHandlers.datepicker = {
init: function (element, valueAccessor, allBindingsAccessor) {
var options = allBindingsAccessor().pickerOptions || {};
$(element).datepicker(options);
ko.utils.registerEventHandler(element, "change", function () {
var observable = valueAccessor();
observable($(element).datepicker("getDate"));
});
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
$(element).datepicker("destroy");
});
},
update: function (element, valueAccessor) {
var newValue = ko.utils.unwrapObservable(valueAccessor());
var oldValue = $(element).datepicker("getDate");
if (newValue - oldValue !== 0) {
$(element).datepicker("setDate", newValue);
}
}
};
$(document).ready(function () {
var model = new D4S.ViewModel();
ko.applyBindings(model);
});<input type="text" data-bind="datepicker: Date, pickerOptions: { minDate: new Date() }" />
<button data-bind="click: ResetDate">Reset</button>
<hr />
<span data-bind="text: Date" />
Se volete vedere lo script in azione potete andare qua: http://jsfiddle.net/PeppeDotNet/sTkWu/
Se ci pensate bene, con questa tecnica è possibile creare dei binding personalizzati per qualsiasi dei plugin di JQueryUI o di tutte le librerie che potete trovare in rete.
Bello no?
