Il blog di Giuseppe Marchi - SharePoint MVP
NAVIGATION - SEARCH

Come utilizzare il date picker di JqueryUI con KnockoutJs

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?
blog comments powered by Disqus