Index
Overview


We have a little conceptual idea of an MVC. And are understanding may be fuzzy, but that is fine, remember iterative learning.

We'll now code up our first MVC application.

Note that most of our work will be in the model for the reasons discussed here.

Things To Learn


Even though you may find this example conceptually simple, there is a ton of things to learn including:


Before Starting -- Ivars 💡


Before we begin our first project, we want to have a fair understanding of js ivars, as they can be non-intuitive.

We want to study these topics:


Now we're ready to code.

Counter MVC Example


Overview


This is a minimal example that demonstrates input fields, output fields and action buttons.

Model: Counter
input: count
output: count, log
actions: increment, decrement

Mockup of View


View
Quick mockup of view


Model (Counter)


We'll work in this order: M-V-C.

Model Code
The model source code is listed here...

The public methods are shown here. We will use these in the unit test and also the ui.
getters:
	getCount
	getLog

setters:
	setCount

actions:
	increment
	decrement
Test Case
The test case code is listed here...

We should code the test case in parallel with the model.


User Interface (UI)


Once we have the model green (tests passing) we move to the UI:


Complete Source Code


The source code for the example is here...

Challenge


The challenge page is here...































JavaScript Guide (Chapter 305 - FirstMVCApps)










< First MVC Apps >

Full Example Challenge Search Site Home Back To Top