Es muss nicht immer AngularJS sein, um ein einiger Massen automatisches Databinding zu haben. Auch mit jQuery kann sich schnell kleine Lösungen basteln. Hier wir eine Liste von Items aus gegeben (<ul><li>...), die <li>'s sind per Drag and Drop sortiertbar und werden später wieder eingelesen und die Items der Reihenfolge der <li>'s entsprechend sortiert. Das wird schon ganz klassisch über die DOM-Elemente gemacht. Aber ich hatte keine Lust darauf auch die Checkboxen dannausdem <li> über das DOM zusuchen und auszulesen.
Hier zeigen sich die Vorteile von Closures mal wieder. Wenn man eine CheckBox ändert wird sofort über das onChange-Event getriggert auch das Feld des Objekts im Array angepasst. Ohne das Array oder DOM-Elemente durchlaufen zu müssen. Alles ganz automatisch.
//bind checkbox to item.visible of the current item
var func=function(item){
return function(){
item.visible=!item.visible;
}
};
check.change(func(items[j]));
Ich kann immer noch nicht verstehen, wie manche JavaScript-Entwickler ohne Closures auskommen und einige.. wenige.. ok.. einer.. sogar mal meinte Closures bräuchte man überhaupt und man komme immer gut ohne aus.
AngularJS ist toll, das steht ausser Frage, aber an einigen Stellen, stört es doch sehr,dass man auch einer sehr abstrakten Ebene arbeitet und nicht direkt mit nativen Elementen und Events arbeiten kann, bzw etwas tun muss um an diese heran zu kommen.
Nun habe ich anfangen mein cJS als AngularJS-Direktiven zu portieren, um das beste aus beiden Welten zu haben. Hier erstmal die Umsetzung von cjs-binding-element. Damit wird das aktuelle Element in das über nge-element angebene Feld des $scope geschrieben.
var nativeElement=function(){
return {
link:function($scope,el,attrs){
var value=attrs.ngeElement;
console.log("init nge-element: "+value);
if(el){
var ang_element = angular.element(el);
var raw_element = ang_element[0];
$scope[value]=raw_element;
}
else{
console.log("el is null");
}
}
};
};