Konwerter klas C# do KnockoutJS ViewModel

Aktualizacja: poprawiony URL: http://gutek.pl/c2kjs

Jakiś czas temu w projekcie, nad którym pracowaliśmy zaczęliśmy się łapać na bezmyślnym przepisywaniu własności klas C# na VM od KnockoutJS. Nie tylko marnowaliśmy czas, ale także wprowadzaliśmy ciężkie do wykrycia błędy związane z literówkami – czy to literówka była po stronie C# a poprawna nazwa po stronie JS czy na odwrót nie miało znaczenia, ale to, że coś się nie bindowało już miało.

Wiemy, że istnieje rozszerzenie umożliwiające proste mapowanie JSON na KnockoutJS VM, jednak ma ono swoje wady (lub nie miało bo od dawna nie zaglądałem do niego). Mianowicie nie radziło sobie po którejś aktualizacji z mapowaniem JSON-VM-JSON tablic. Przez to mieliśmy jeszcze większe problemy, próbując to obejść a czasu – na to by przejrzeć kod i go z debugować oraz znaleźć miejsce, w którym błąd występuje – nie było.

Dlatego jednego dnia usiadłem i napisałem mały konwerter, który umożliwia w prosty sposób zamianę klasy C# w VM. Cały projekt udostępniony jest pod adresem http://gutek.pl/c2kjs i każdy kto chce może z niego korzystać.

Sposób wykorzystania

Zasada jest dość prosta:

• Ustawiamy opcje
• Wklejamy lub wpisujemy kod C#
• Klikamy Generate
• Kopiujemy przekonwertowany kod

Nic trudnego :)

Opcje

Mamy kilka możliwych opcji, raczej bez dokumentacji każdy powinien je zrozumieć, ale na wszelki wypadek:

• Only public properties – bierz tylko publiczne własności z klasy, protected itp. olej. Domyślnie zaznaczone, zaś odznaczone bierze wszystkie własności, ale nie bierze pod uwagę pól! Żadna opcja nie bierze pod uwagę pól!
• Include Default Data – doszliśmy do wniosku u nas w projekcie, że nie ma sensu sprawdzać czy przekazane dane do obiektu istnieją czy też nie, więc ta opcja jest domyślnie wyłączona, zaś kiedy ją włączycie nastąpi sprawdzenie czy obiekt przekazany do konstruktora jest zdefiniowany, i jeżeli jest to przypisze jego wartości, zaś jeżeli nie to zainicjuje VM domyślnymi wartościami obiektu – pusta tablica, false, 0 itp.
• Use camelCase for ko – domyślnie zaznaczony, wykorzystuje nazwy camelCase dla VM.
• Only with public Getter – blokada która jedynie bierze pod uwagę własności, które mają publiczy Get, czyli mogą coś zwrócić kiedy przekazujemy nasz model z aplikacji do kodu w JS. Domyślnie zaznaczona.
• Include Enums – konwertuje enumy do obiektu JS, który ma odpowiednik nazwaElementuEnum: stringNazwaElementuEnum. Domyślnie odznaczona.
• Use camelCase for everything – używa camelCase nie tylko do modelu ko, ale także do modelu przekazanego z serwera. Domyślnie odznaczona ze względu na to jak działa serializator JSON wbudowany w .NET.
• Sort properties alphabetically – sortuje zwracany wynik alfabetycznie. Domyślnie odznaczona.
• Include empty types – jeżeli nasza klasa nie ma żadnych własności albo nawet kodu, lub nie ma ich ze względu na inne zaznaczone opcje (na przykład only public properties) to zaznaczenie jej spowoduje utworzenie pustego konstruktora w JS.

Wygląd UI

Znane błędy

Może nie błędy, features. Nie każdy tym kolekcji będzie rozpoznany :( czyli nie zawsze będziecie mieli observableArray, ale dołożyłem starań by kolekcje wbudowane w .NET były obsługiwane, czy wszystkie wyłapałem? Nie wiem, wiem, że jedynym sposobem na to był hardcoding bo NRefactory nie potrafiło rozpoznać czy aby na pewno kod jest tablicą – zresztą nie dziwne, musiałby móc to skompilować by wiedzieć, a nie tylko parsować wielgaśny string.

Podsumowanie

Nie jest to nic skomplikowanego, ale działa i oszczędza czas. Nie chcę nad tym długo siedzieć, więc jeżeli natraficie na jakiś rażący bug to dajcie znać, poprawię, ale nie sądzę bym to dalej rozwijał i dodawał kolejne opcje i możliwości jak chociażby konwersja metody z C# do VM. Czy też uwzględnienie klas w kodzie wklejanym – dwie klasy, jedna zawiera prop odnoszącą się do drugiej klasy. To już można szybko ręcznie poprawić w kodzie a dodatkowo wszystko też zależy od tego co chcecie osiągnąć – dla niektórych może być potrzebna inicjalizacja klasy, dla innych wystarczy, że zostanie ona przypisana jako observable do własności w JS.

Tak czy siak :) Życzę miło korzystania, mi się projekcik przydał i te 4h które poświęciłem na jego napisanie zwróciły się w ciągu 5 dni roboczych kiedy to natrafiliśmy na klasę mająco od … własności :)

Na wszelki wypadek, powtarzam URL jakby zaginął w treści: http://gutek.pl/c2kjs