Hi @Ramcat welcome to Ember.
There is potentially a fair amount of complexity in what you want to do especially if you need to persist to a backend using something like ember data. Since you just want to see the basics I am going to provide an example that glides over some of the nuance. But hopefully this is instructive on your learning journey.
First I recommend learning how to use http://emberjs.jsbin.com
It is a convenient way to create quick prototypes and share code. Great resource when first learning ember and need someone else to look at your code.
Back to your question:
Here is a basic example. I have commented up heavily, I think it demonstrates very broadly one way to do what you want to do. There are many possible implementations.
Few major points:
We build a “model” in our route that contains an empty array. This is our “collection”
We have two model objects
App.Snake that is a subclass of Animal. It can be useful if want to organize your models in an hierarchical way with inheritance.
And finally there is an
addAnimal action in the controller. This handles the business of gathering the form data and mapping it to an instance of the animal object (or snake if reptile). After building up a new model instance we “push” the instance onto our collection of animals.
Also I have setup the template to display the collection list of animals. Not exactly as your template example. But general concept with very basic markup.
Note the explicit use of
set('foo'), these getters and setters are required to make ember’s object work effectively.
Hopefully this illustrates a bunch of useful concepts. Let me know if you have any specific questions.