Talk me through the basics?


#1

Ok, here is an HTML mockup of the project: http://user.xmission.com/~ramcat/ember/index2.html

This is an Ember version of the same site, slightly functional: http://user.xmission.com/~ramcat/ember/index.html

If you follow the links Collection->Add Snake in the HTML mockup you’ll see: http://user.xmission.com/~ramcat/ember/AddSnake.png (sorry can’t upload the image, Discourse new user rule). You’ll see a big red circle, that should be bound to an instance of something like this:

App.Snake = Ember.Object.extend({
id: null,
name: null,
age: null,
sex: null,
YearAquired: null,
YearBorn:  null,
genetics: [],
image: null,

morph: function() {
	if (this.genetics.length > 0)
	{
		return "Calculated Morph";
	}
	else
	{
		return "Normal";
	}
}.property('genetics')
});

Then I want to add that instance to the collection of animals show below. I can’t figure out how to do that.


#2

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.Animal and 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 get('foo') and 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.

JSBin Example:

http://emberjs.jsbin.com/wegip/1/

JSBin Source:


#3

Also, sometimes it is easier to see the code without all the comments text. So here is the same thing with comments removed so you can focus on code flow.

JSBin

http://emberjs.jsbin.com/nigiq/1/

JSBin Source


#4

Oh, awesome. Can’t wait to go through these when I get home from work.


#5

Cool. Feel free to clone, modify or extend the JSBin example and let me know if you have any specific questions.

Also heads up I noticed that I made a couple bugs:

First

  animalObject.set('male', this.get('male'));

Should actually say

  animalObject.set('sex', this.get('sex'));

Second in the template I did not print out all the properties of the Animal/Snake object. Figured I could leave that as a exercise for the reader. :smile:

Enjoy!

There is definitely more to talk about if you want to use Ember Data and proper models and want to persist to local storage or a backend. I chose to just use a simple array and basic Ember Object type so that the basics would be covered. If we used Ember Data the code could remain mostly in tact but there would be some tweaks because of the way ember models work when creating and finding records.


#6

I do intend on persisting to HTML5 local storage, but got to get the application working first. I hope there is not another cliff when persisting the data - I’m and old database guy and writing a data layer is part of my normal work.


#7

@Ramcat I recommend starting out just learning how basic Ember Objects work and then check out


#8
if (this.get('genetics').get('length') > 0)

This was unexpected. My code accessed the parts of the object like you would in any classical oo language. I recently took a trip through Lua (and AS3 for years) both prototypical languages but JavaScript’s way of doing prototypical stuff still throws me. What’s weird with that is that even after you gained access to the array with this.get(‘genetics’) you then use a getter to access a property of the already obtained array (length). Weird.

@eccegordo That was an awesome example. I am creating and adding a snake to my “collection” page. I would shoot a ember.jsbin back at you but I am way to tired tonight and I had to deal with 3 escaped rats. Luckily my daughter saw them before they were lost and I had to rebuild their cage with metal strip ties where there used to be plastic ones. That unfortunately took time.

Thank you so much for providing it. I’ll keep working on this and update this thread.


#9

I believe this would also work

if (this.get('genetics.length') > 0) {
//...
}

#10

That’s more of an ember thing than it is a javascript thing though, ember uses the get and set methods to provide the automatic data binding that you’ll see in ember apps (so if you change your models value anywhere, the UI is automatically updated)


#11

@eccegordo Not sure what to say. Per your post in Why i´m leaving ember you did just that. Took the time to help somebody new out. Actually it was rather breakthrough for me. I am now rendering two collections on one page, like this jsbin I wrote.

Thank you so much.

That said I was just about to give up tonight, instead I got stuff working and it turned out to be a late night of coding because so much was working. Lost a half hour on an {{each}} helper because I forgot to close it properly {{/each}}, ah coding.


#12

Yeah, I got that it was an Ember thing, the get and set part, but I’m sure some of the way that is put together is influenced by JavaScript’s strange prototypical syntax. And maybe not, the useable part of your post is that using get and set triggers the data binding to stay in synch. That is cool, and I get now why you want the getters and setters however strange they appear.


#13

Yeah it is the simple stuff that sometimes takes the longest to debug. :smile:

Also, be aware there generally two types of helpers block form with the # with the beginning and inline.

You can see this with linkto helper:

block form

{{#link-to 'route'}}text{{/link-to}}

and the inline form

{{link-to 'text' 'route'}}

You will find generally that with handlebars there is very little logic allowed in the template layer. A few control structures but not much else. This is a good thing in the long run but sometimes have to go through hoops to get data “on the page”.

I think ember really forces you to think differently about how you setup and manipulate data. It it amazing what can be done when you learn how to wrangle computed properties and data bindings into shape. Really powerful patterns emerge.

Good luck on all your ember coding adventures. Glad I was able to help.