Ruby, etc

Learn all the things

He who enjoys doing and enjoys what he has done is happy. - Fortune Cookie

Trying Out Emberjs Models and Views

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:

I downloaded the Starter Kit from emberjs.com and it had a skeleton index and app.js file ready to go. Nice. I first played around with making a model and calling a method on it.

1
2
3
4
5
6
7
8
9
Person = Ember.Object.extend({
    workout: function() {
        alert(this.get('name') + " is working out now!");
    }
});

var person = Person.create({
    name: "Nola Stowe"
});

So I can then do:

1
person.workout();

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
/* trying out observers, adding an observer onto the person object  */
person.addObserver('workoutTime', function(){
    alert("your workout time has changed to: " + this.get('workoutTime'));
});

/*  trying out setting the workoutTime */
person.set('workoutTime', 6);
person.set('workoutTime', 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
App.MyView = Ember.View.extend({
    'templateName' : 'workouts',
    'person' : person
});

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
$(document).ready(function(){
  workoutView = App.MyView.create();
  workoutView.append();
  $('#change_button_up').on('click', function(){
      workoutTime = person.get('workoutTime');
      person.set('workoutTime', workoutTime + 1);
  });
  $('#change_button_down').on('click', function(){
      workoutTime = person.get('workoutTime');
      person.set('workoutTime', workoutTime - 1);
  });
});

I could refactor into a method that takes “+1” or “-1” but hey, it works. Kinda cool? Now maybe to learn some more things…

full source of my example code

Update: For those wanting to make a full app, @trek suggests http://trek.github.com/ as a structure. Thanks

Comments