Knockout.js jest biblioteką JavaScript z powodzeniem implementującą wzorzec MVVM (Model – View – View Model), znany chociażby z Silverlighta. Wykorzystanie tego wzorca w przypadku standardowego tandemu HTML + JavaScript daje ogromne możliwości w postaci automatycznie aktualizującego się widoku, bez konieczności ręcznego wprowadzania zmian do kodu HTML. Nas jako programistów interesuje tylko jedno – view model, czyli obiektowa reprezentacja danych, która znajduje odzwierciedlenie w warstwie prezentacji. W skrócie, wystarczy zaktualizować obiekt JavaScript, a zmiany zostaną wprowadzone bez naszej ingerencji w widok.

Zacznijmy od prostego przykładu.

<p>jakasZmienna: <span data-bind="text: jakasZmienna"></span></p>

function ViewModel() {
    this.jakasZmienna = "warosc zmiennej";
}

ko.applyBindings(new ViewModel());

Powyższy kod, mimo iż niezbyt skomplikowany, pokazuje siłę Knockout.js. Nasz view model definiuje zmienną o nazwie jakasZmienna. Jak się łatwo domyślić wartość tej zmiennej zostanie wyświetlona wewnątrz znacznika span. Co jednak chcielibyśmy zmodyfikować zawartość tej zmiennej? Sprawdźmy.

Dodajmy do kodu HTML pole tekstowe.

<input type="text" data-bind="value: jakasZmienna" />

I zmodyfikujmy nieco view model.

function ViewModel() {
    this.jakasZmienna = ko.observable("warosc zmiennej");
}

Teraz zmieniając zawartość pola tekstowego, zaobserwujemy, że wprowadzony tekst pojawia się w akapicie (nie zapomnijcie, że zdarzenie zostanie wywołane w momencie, gdy pole tekstowe przestanie być aktywne).

Oczywiście poza pojedynczymi wartościami, możemy przekazywać całe tablice, dzięki czemu dane przesłane z serwera możemy prezentować w postaci tabel i/lub list. Oto prosty przykład.

Zacznijmy od kodu HTML.

    <ul data-bind="foreach: items">
        <li data-bind="text: name"></li>
    </ul>

Jak się zapewne domyślacie, lista zostanie wypełniona danymi z view model.

function ViewModel()
{
    this.items = ko.observableArray(
        [
            { name: "Jan Kowalski" },
            { name: "Ewa Wisniewska" },
            { name: "Piotr Nowak" }
        ]
    );
}

ko.applyBindings(new ViewModel());

A co jeśli chcielibyśmy ograniczyć listę elementów i zastosować filtrowanie wyników? Nic prostszego. Wystarczy zastosować instrukcję warunkową if. Możemy użyć jej tak samo jak w przypadku foreach lub zastosować specjalny komentarz.

Czytaj dalej tutaj (rozwija treść wpisu)
Czytaj dalej na blogu autora...

Zwiń
Czytaj na blogu autora...

When you have plenty of Symfony2 applications and you need to deploy them from time to time, you are probably sick of thinking about every activity you need to do for every deploy. Often people use some build scripts, which are hard to maintain and tends to be unreadable. I wanted to automate it as [...]

Ten post jest implikacją rozmowy jaką przeprowadziłem na piwku po konferencji #4developers. Rozmowa dotyczyła problemu anemicznego modelu w aplikacjach Symfony. Problem był mi znany wcześniej jednak zainspirowany rozmową postanowiłem przyjrzeć się tematowi bliżej.

W ostatnim projecie musiałem stworzyć dwa pola typu select, gdzie wartości dostępne w drugim polu były zależne od wybranej opcji w pierwszego pola select. Sztandarowym przykładem może tutaj być lista województw + lista miejscowości w ramach wybranego województwa. Sytuacja wygląda tak, że mamy pierwsze pole typu select: Jak więc widać w polu tym umieszczony jest [...]

Mamy niedzielę, więc warto trochę poprogramować dla sportu (oczywiście zamiast uprawiania „normalnego” sportu ). Z głupoty chciałem rozpracować kilka rzeczy. Przede wszystkim wprawić się trochę w CoffeeScript, a przy okazji sprawdzić w działaniu zapisywanie danych po stronie przeglądarki przy użyciu localStorage.

Moim dzisiejszym zamiarem było stworzenie strony z formularzem, w którym wpisywane wartości zapisywałyby się na bieżąco po stronie przeglądarki wpisującego. Powiedzmy, że jakaś sierotka podczas wypełniania formularza zamknie kartę/przeglądarkę i całe mozolne wpisywanie poszło w las. Dzięki localStorage wpisane dane nie zostaną skasowane, a formularz wypełni się automatycznie. Oczywiście niesie to za sobą szereg niebezpieczeństw, jak np. co w przypadku kogoś korzystającego z publicznego komputera, chcącego zamówić coś w sklepie internetowym i mu się nagle „odwidzi”? Następna osoba dostanie dane osobowe poprzednika na tacy. Minimalnym zabezpieczeniem byłby mechanizm kasujący dane jeśli są sprzed dłużej niż np. 2 minut.

Dodatkowo chciałem zrobić przycisk, który daje jakąś kontrolę nad przechowywanymi danymi. Efekt można sobie oglądać tutaj.

Używana przeze mnie wtyczka do kolorowania składni (WP-Syntax) nie obsługuje CS. Zamiast tego kod umieszczę za pomocą embedded gist z GitHub. Efekt jest bardzo ładny. Poniżej „mózg” formularza: Efektu kompilacji nie pokazuję. Jeśli ktoś bardzo chce to może sobie podejrzeć plik storager.js.

Jeśli szukasz biblioteki backupu danych formularza w czasie rzeczywistym opartego o localStorage to polecam wtyczkę jQuery: Sisyphus.

kilka słów na początek

O interfejsach pisałem już kilka razy (np. tu i tu) i pewnie jeszcze nie raz napiszę, ponieważ są one (wraz z klasami abstrakcyjnymi) jednymi z najistotniejszych elementów projektowania obiektowego. Kiedy już je poznasz, zrozumiesz i się z nimi zaprzyjaźnisz, tak naprawdę dopiero w tym momencie odkrywasz piękno pisania obiektowego, jego elastyczność.Nie poruszę w tym wpisie wszystkich aspektów dotyczących interfejsów, nawet nie będę się starał, chodzi mi jedynie o podstawowe (i moim zdaniem najważniejsze) cechy interfejsów.Czytaj więcej »

W ostatnim tygodniu znowu trochę „przysnąłem” z wpisami, ale wytłumaczenie jest proste: już w środku tygodnia bez zbędnych ceregieli pojechałem do domu na święta i przez ten czas komputer (poza totalnie nie wymagającymi myślenia czynnościami typu klikanie na społecznościówkach) był … #LINK#