I’ve read about emberjs and I’ve tried CodeSchool Backbone and the concepts are interesting, I like the concept of a model updating some text on the screen without having to write $(‘#myelement’).text(‘updated content’) and a friend was mentioning how much they like the emberjs models. So, I wanted to try and in a way I could only worry about a few pieces (that router and junk still kinda makes me crazy for frontend since I do that on the back end.. maybe I just need to do more). I was reading the Ember Documentation and they have some small examples that inspired me. So I set out to try somethings:
1 2 3 4 5 6 7 8 9
So I can then do:
and be able to call my method.
I wanted to try observers next, so I added a workout time to my model and an alert that came up every time it got changed. I added the observer code then tried in the console:
1 2 3 4 5 6 7 8
Cool. Whenever I called set the observer fired. Gotcha, I thought i could do person.workoutTime = 3 and it would work..but no. You have to call person.set(‘workoutTime’, 3). Ok, now I want to make a view and have it automatically update whenever the workoutTime was changed. So I added a view model and a template:
1 2 3 4
Then in index.html
Too lazy to even use a css style block, much less external stylesheet, I inlined some styles so it would be easier to see and not all smashed up in the top left corner. The script tag defines the template, which if you see the name is specified in the model MyView along with the instance variable person.
The UI shows two buttons and the name of the person and what time their workout starts.
Now to add some jquery
1 2 3 4 5 6 7 8 9 10 11 12
I could refactor into a method that takes “+1” or “-1” but hey, it works. Kinda cool? Now maybe to learn some more things…
Update: For those wanting to make a full app, @trek suggests http://trek.github.com/ as a structure. Thanks