Putting Models, Collections, and Views Together to Create New Records
A true single-page application needs to do more than display a static list of the records in the back end. It should be able to perform all of the usual CRUD operations at a minimum. Let’s walk through creating records in the UI to get a feel for how this might work in a Dart MVC-like approach.
Rather than attempt to make our existing ComicsView try to do too much, let’s create a new view class for the logic responsible for creating comic book records. In the main entry point, the new view class can be created after everything else is built.
| | main() { |
| | var comics_view, comics_collection; |
| | |
| | |
| | comics_collection = new ComicsCollection( |
| | onChange: ()=> comics_view.render() |
| | ); |
| | comics_view = new ComicsView( |
| | el: document.query('#comics-list'), |
| | collection: comics_collection |
| | ); |
| | comics_collection.fetch(); |
| | |
| | new CreateComicView( |
| | el: document.query('#add-comic'), |
| | collection: comics_collection |
| | ); |
| | } |
Given the similarity between the ComicsView and CreateComicView constructors, there is a natural temptation to generalize a single view solution that works for both. We resist this for now, though we give into temptation in Chapter 9, Project: Extracting Libraries.
Our CreateComicView class needs to attach a click handler for the #add-comic element. When clicked, it should toggle the new comic book form. Our constructor also needs to build that form.
| | class CreateComicView { |
| | var el, model, collection; |
| | Element form; |
| | |
| | CreateComicView({this.el, this.model, this.collection}) { |
| | el.onClick.listen((event) => toggleForm()); |
| | attachForm(); |
| | } |
| | } |
The Element form is different than in the ComicsView, but we have seen all of this before. Again, the el, model, and collection instance variables are declared as fields in our view. We will also have a form element in this view, which will hold the form. The constructor is defined as always, with the same name as the class. The el, model, and collection instance variables can be optionally set in the constructor.
Different here is that our constructor actually has a body. In addition to simple instance variable assignment, we need to listen for click events to toggle the visibility of the form and to attach the form to the page’s DOM.
Toggling the display of the form should look familiar to web programmers. We switch between ’block’ and ’none’ values for the form’s display style.
| | toggleForm() { |
| | if (form.style.display == 'none') { |
| | form.style.display = 'block'; |
| | } |
| | else { |
| | form.style.display = 'none'; |
| | } |
| | } |
The real action takes place in the attachForm method. It creates and adds the form element to the web page, and then adds two event handlers.
| | attachForm() { |
| | form = new Element.html("<div>${template}</div>"); |
| | form.style.display = 'none'; |
| | el.parent.children.add(form); |
| | InputElement titleInput = form.query('input[name=title]'), |
| | authorInput = form.query('input[name=author]'); |
| | // handle create form submission |
| | form.query('form').onSubmit.listen((event) { |
| | collection.create({ |
| | 'title': titleInput.value, |
| | 'author': authorInput.value |
| | }); |
| | form. |
| | queryAll('input[type=text]'). |
| | forEach((InputElement input) => input.value = ''); |
| | toggleForm(); |
| | event.preventDefault(); |
| | }); |
| | |
| | // handle clicks on the Cancel link |
| | form.query('a').onClick.listen((event) { |
| | toggleForm(); |
| | event.preventDefault(); |
| | }); |
| | } |
The first event handler handles form submission. It extracts the author and title from the form, using them to create a new comic book in the collection. Thanks to all of our previous work, collection.create() not only creates a record in the back end, but it also generates an add event in our MVC stack that ultimately triggers the ComicsView object to add the new record on the web page. The remainder of the form submission handler cleans up and hides the form.
The second handler simply toggles the form when the Cancel link is clicked. Both handlers prevent default actions (form submission, link following) from occurring—our handlers have sufficiently handled the events.