Literalna próba zapisu znaków specjalnych przy użyciu js powoduje dosłowne ich wyświetlenie:
Kanał ATOM
<script type="text/javascript">
alert('»')
alert('«')
</script>
Możemy to zapisać również używając innej notacji:
<script type="text/javascript">
alert('»')
alert('ª')
</script>
Ale i to zostaje przepisane. Aby uzyskać żądany efekt należy użyć funkcji fromCharCode oraz kodu danego znaku – dla » (czyli ») będzie to 187:
<script type="text/javascript"> alert(String.fromCharCode(187)) alert(String.fromCharCode(171)) </script>
Poprzednim razem dosyć pobieżnie przeleciałem przez możliwości jakie oferuje Knokout.js. Rozwijając tamten wpis, opiszę dzisiaj na prostym przykładzie sposób pracy z kolekcjami.
Załóżmy, że nasza aplikacja prezentuje listę produktów w postaci tabeli wyświetlającej nazwę oraz cenę. Najczęściej w takim przypadku dane pobierane są z serwera, a następnie wyświetlane na stronie. Dodanie oraz usunięcie produktu odbywa się poprzez przeładowanie strony i proces powtarza się od początku. Wprawdzie można wykorzystać AJAX do obróbki danych, ale i tak pozostaje nam na głowie aktualizacja widoku. Dzięki Knokout.js nie musimy już się tym więcej zajmować.
Zacznijmy od widoku.
<table> <thead> <tr> <th>Nazwa</th> <th>Cena</th> <th></th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td><a href="#">usuń</a></td> </tr> </tbody> </table>
Jak widać jest to typowa tabela przygotowana do uzupełnienia danymi. Ponieważ korzystamy z Knokout.js, musimy przygotować ViewModel, który będziemy bindować do naszego widoku.
function ItemsViewModel(items)
{
var self = this;
self.items = ko.observableArray(items);
}
ViewModel to nic innego jak zwykła klasa JavaScript, do której przekazujemy dane pobrane z bazy (atrybut items). Warto zwrócić uwagę na przypisanie var self = this;. Dzięki temu będziemy zawsze mieli dostęp do właściwego obiektu (o czym za chwilę). Reszta kodu to nic innego jak wskazanie, że items, to tablica, którą biblioteka ma obserwować w poszukiwaniu zmian. Pozwoli to odwzorować każdą zaistniałą zmianę w widoku.
Pora zaktualizować widok tak, aby korzystał z przygotowanego ViewModelu.
<table> <thead> <tr> <th>Nazwa</th> <th>Cena</th> <th></th> </tr> </thead> <tbody data-bind="foreach: items"> <tr> <td data-bind="text: name"></td> <td data-bind="text: price"></td> <td><a href="#" data-bind="click: $root.deleteItem">usuń</a></td> </tr> </tbody> </table>
Na pierwszy rzut oka zmian nie widać. Jedyne co się zmieniło, to pojawienie się kilku atrybutów data-bind. Pierwszy z nich – foreach: items – jest odpowiedzialny za iterowanie po wszystkich elementach naszej kolekcji. Każdy element będzie reprezentował jeden wiersz tabeli. Text: name oraz text: price oznaczają, że w tym tagu tekstem będzie wartość właściwości obiektu o nazwie name oraz price. Ostatnim bindowaniem jest click: $root.deleteItem. Bindowanie to oznacza, że do zdarzenia click, przypisana zostanie metoda deleteItem. A dlaczego przed nazwą metody jest $root? Ponieważ aktualnym obiektem jest konkretny produkt. $root oznacza, że odwołujemy się do głównego obiektu ViewModel.
Dodajmy teraz do ItemsViewModel metodę deleteItem.
self.deleteItem = function(item) {
self.items.remove(item);
}
Metoda jako parametr przyjmuje aktualny obiekt, czyli w tym przypadku pojedynczy produkt. Tutaj właśnie widać po co utworzyliśmy zmienną self. Wewnątrz metody this wskazuje na coś zupełnie innego niż self. Jeśli nie utworzylibyśmy zmiennej self, wówczas nie mielibyśmy dostępu do kolekcji.
Na koniec dodajmy jeszcze prosty formularz, który pozwoli definiować nowe produkty.
It’s been a long time since I’ve written my last english-spoken text. It was about Webworkers API. The visitors number has been achieved, so it’s time for the next topic. Now I’m going to talk about Canvas and some CoffeeScript tricks. Again I’m asking You to forgive me my „language glitches”.
Since I don’t like to get to know about something new in an abstract way, we’ll going to write a simple EAN-13 barcode generator. You meet it at every store, it saves time and money for merchants. Price can be attached to barcode instead of price tags. Imagine changing a price in the same 100 products. But how to generate one? Wikipedia has a nice description. EAN-13 is composed of GS1 organization numbers, company numbers, item reference and check digit.
This time I’m going to cover some CoffeScript features I didn’t talk about 2 posts earlier: extending classes and static properties. I’ll write one class computing „0101…” EAN-13 code and another one capable of drawing the code on HTML canvas element. I even created a public GitHub repository, so feel free to steal some code. Working example can be found here.
I won’t explain You all code here, only the most important parts. For example how to compute control digit?
computeControlSum: -> sum = 0 # this one line of array comprehension substitutes four lines in pure JS sum += (if key % 2 then 3 else 1) * value for value, key in @eanArray controlSum = 10 - sum % 10 if controlSum == 10 then controlSum = 0 return controlSum
Piece of code above is translated into:
EAN13Generator.prototype.computeControlSum = function() { var controlSum, key, sum, value, _i, _len, _ref; sum = 0; _ref = this.eanArray; for (key = _i = 0, _len = _ref.length; _i < _len; key = ++_i) { value = _ref[key]; sum += (key % 2 ? 3 : 1) * value; } controlSum = 10 - sum % 10; if (controlSum === 10) { controlSum = 0; } return controlSum; };
As we can see we don’t need to worry about some temporary variables in CoffeScript.
Digits 2–7 in barcode (before the central „whiskers”) can be written as odd or even. Pattern depends on first barcode digit. It has been written as object literal:
class EAN13Generator # some code here # this is how we create class properties # we can call to such property like EAN13Generator.LEFT_SIDE_CODING @LEFT_SIDE_CODING: 0: ['odd', 'odd', 'odd', 'odd', 'odd', 'odd' ] 1: ['odd', 'odd', 'even', 'odd', 'even', 'even'] 2: ['odd', 'odd', 'even', 'even', 'odd', 'even'] 3: ['odd', 'odd', 'even', 'even', 'even', 'odd' ] 4: ['odd', 'even', 'odd', 'odd', 'even', 'even'] 5: ['odd', 'even', 'even', 'odd', 'odd', 'even'] 6: ['odd', 'even', 'even', 'even', 'odd', 'odd' ] 7: ['odd', 'even', 'odd', 'even', 'odd', 'even'] 8: ['odd', 'even', 'odd', 'even', 'even', 'odd' ] 9: ['odd', 'even', 'even', 'odd', 'even', 'odd' ]
The next interesing part is how to concatenate barcode string. Here’s how:
generateEANcode: -> # we're using class property to find out first 6 digits coding codingStyle = EAN13Generator.LEFT_SIDE_CODING[@eanArray[0]] eanCode = EAN13Generator.START_SENTINEL for i in [1..6] if codingStyle[i-1] == 'odd' eanCode += EAN13Generator.EAN_13_CODE_TABLE[@eanArray[i]].left.odd else eanCode += EAN13Generator.EAN_13_CODE_TABLE[@eanArray[i]].left.even eanCode += EAN13Generator.CENTRAL_SENTINEL eanCode += (EAN13Generator.EAN_13_CODE_TABLE[@eanArray[i]].right) for i in [7..12] eanCode += EAN13Generator.END_SENTINEL
Class extension is realized through extends keyword.
class EAN13CanvasDrawer extends EAN13Generator # @canvasId is shorthand for @canvasId = canvasId constructor: (eanString, @canvasId) -> # we're launching EAN13Generator constructor super(eanString)
I’m using jCanvaScript JS library to draw on canvas. Below is the whole drawBarcode() method:
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.