Backbone.js - Widoki

Backbone.js Opiera się na strukturze MVC, oprócz posiadania Modele, też ma wyświetleniaZgodnie z filozofią tej architektury budowy oprogramowania, widoki to takie, które mają obowiązek pokazania użytkownikowi danych generowanych między kontrolerem a modelem w zależności od złożonego żądania.
w Backbone.js działa to nieco inaczej, widok nie zawiera elementów, które użytkownik widzi bezpośrednio, a raczej przekazuje dane za pomocą silnika szablonów.
Widoki w Backbone.js
w Backbone.js widoki jako takie nie zawierają języka HTML, który można pokazać użytkownikowi naszej aplikacji, a wręcz przeciwnie, zawierają logikę, która pozwoli nam zbudować działanie frontowej części aplikacji, którą rozwijamy z wykorzystaniem modelu bazę, czyli to, co mamy w modelu, będziemy nią manipulować w widoku, a więc mając dwa poziomy działania.
Aby wyświetlić dane, użyjemy metoda render () co pozwala nam przekazać dane z naszego widoku do szablonu, wspomniany szablon jest wbudowany w jakiś silnik Szablony JavaScript na przykład: Podkreślenie, wąsy, Jquery-tpml itp..
Zobacz tworzenie
W celu stwórz widok Podążamy za procesem dość bezpośrednim i podobnym do tworzenia modelu, aby wygenerować widok, z którego musimy tylko wyjść Backbone.Widok, zobaczmy, jak to się zachowuje, gdy uruchomimy go na naszym konsola chromowana za pomocą pliku HTML z bibliotekami Backbone.js, jsquery Tak podkreślać już załadowany.
Zobaczmy najpierw kod, który umieścimy w naszej konsoli:

 var TodoView = Backbone.View.extend ({tagName: 'li', // Buforuj funkcję szablonu dla pojedynczego elementu. todoTpl: _.template ("Przykładowy szablon"), zdarzenia: {'dblclick label ':' edit ',' keypress .edit ':' updateOnEnter ',' blur .edit ':' close '}, // Odśwież podpisy etykiety elementu render: function () {this. $ el.html (this.todoTpl ( this.model.toJSON()); this.input = this.$('.edit');return this;}, edit: function() {// Jest wykonywany po dwukrotnym kliknięciu znacznika}, zamknij : function () {// jest wykonywana, gdy fokus jest usuwany z elementu}, updateOnEnter: function (e) {// jest wykonywana po naciśnięciu klawisza w trybie edycji, // jednak poczekaj, aż enter zostanie wciśnięty, aby rozpocząć działanie}}); 

Jak widać, po wykonaniu poszerzać odpowiednio inicjujemy szereg atrybutów, które sprawią, że nasz widok będzie działał, dodatkowo w każdym elemencie umieszczamy komentarze, abyśmy wiedzieli jak to działa.
Zobaczmy teraz w konsoli, co się dzieje, gdy wywołamy widok:

WażnyDzwoniąc element w konsola.log () to, co zrobiliśmy z obiektem, który tworzymy z naszego punktu widzenia, to, co robimy, to wypisujemy element DOM odpowiada w ten sposób, że nasze poglądy mogą komponować swoje elementy i tym samym być od razu wstawiane w drzewo DOM szablonu dokumentu.
Na tym kończymy ten samouczek, w którym zrobiliśmy już krok do przodu w tym, co odpowiada generowaniu widoków w aplikacji MVC przy użyciu Backbone.js.Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt