hardscrabble 🍫

By Max Jacobson

Psst. Check out my RubyConf 2017 talk, There are no rules in Ruby.

blog posts

learning ember.js: day two

01 Sep 2013

OK. Back to work.

Yesterday I stretched out my head and fell asleep. I was glad to see that while I was sleeping, the team made good and released Ember 1.0

I made some small progress since then.

At Mendel’s recommendation I changed the first line of my CoffeeScript program from:

App = Ember.Application.create()

to

window.App = Ember.Application.create()

which insists on App being a global variable, and avoids CoffeeScript’s usually helpful behavior of prepending all variable declarations with var.

I added some additional routes. I decided I’m making a homepage/blog thing. Very much inspired by / half-following-along the 30 minute video blitz of an introduction Tom Dale gives on http://emberjs.com/guides/.

So now there is an about page and a posts page, and also an individual page for each post. The posts data is still hardcoded into the CoffeeScript, not fetched from some external API. That will come later.

It’s cool to see the ways this is different from and similar to rails. It feels weird to have so few files. I’m sure there’s a way to separate your code into many files but it isn’t introduced in that video.

Here’s another example, straight from the video, that surprised me. This is in my route for an individual blog post. It’s like a post#show action in rails:

App.PostRoute = Ember.Route.extend
  model: (params) ->
    posts.findBy 'id', params.post_id

This was working in the video but wasn’t working for me. I logged the params object and saw that the post_id attribute, which is set by the URL (eg when visiting /posts/3, the params object would look like {post_id: "3"}), was showing up as a string, not a number. So I tried this:

App.PostRoute = Ember.Route.extend
  model: (params) ->
    posts.findBy 'id', parseInt(params.post_id)

which totally worked.

Rails has a very similar pattern but its find method anticipates looking up records based on ids from params hashes, and doesn’t care if the id is a string or integer.

Anyway I have barely scratched the surface of Ember so please forgive me if I’m missing something. Goodnight!

My progress as of today is here: demo / source

learning ember.js: day one

31 Aug 2013

the realization

OK I want to learn ember.js.

Ember has been in development for years and the 1.0 version is meant to be released this weekend. There have been eight release candidates. They’re ready.

But… am I? This release feels like an exciting and right time to dig in. I’ve looked at it before and it hasn’t clicked. But, having just finished my semester at The Flatiron School, I should have time to make it click. And I must keep learning!

rooting around in the mud

Ember provides a starter kit which demonstrates a basic usage. It’s a static HTML page that includes all the necessary JavaScript libraries (jQuery, Handlebars, and Ember) and then an app.js file for us to do our work in. It starts off looking like this:

App = Ember.Application.create();

App.Router.map(function() {
  // put your routes here
});

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return ['red', 'yellow', 'blue'];
  }
});

ember starter kit app.js

When you open index.html in your browser, you can see those three colors have shown up in a bulleted list. The relevant part of that file looks like this:


<script type="text/x-handlebars" data-template-name="index">
  <ul>
  {{#each item in model}}
    <li>{{item}}</li>
  {{/each}}
  </ul>
</script>

template for displaying colors

Cool. I can kinda see how the data shows up here.

making it mine

I just rewrote that app.js as app.coffee because I’m that guy:

App = Ember.Application.create()

App.Router.map ->
  # put your routes here

App.IndexRoute = Ember.Route.extend
  model: ->
    ['red', 'yellow', 'blue', 'green']

coffeescript rewrite (i added a color too)

And now I’m running coffee -cw js/app.coffee 1 and it is compiling it for me and the site still displays that nice list. Rails auto-compiles coffeescript for you so this is kind of an extra hassle of a step but that is the life we lead.

next steps

My next step as always is to google around and open 175 tabs and then feel overwhelmed and drink some tea and relax for a while.

Did I read this: http://net.tutsplus.com/tutorials/javascript-ajax/getting-into-ember-js-part-2/? Yes I did and it did not hit that sweet spot.

I closed all my tabs. I want to just play around. I decided to ditch that array of colors and try using slightly richer data. Here’s what I came up with:

App = Ember.Application.create()

App.Router.map ->
  # put your routes here

App.IndexRoute = Ember.Route.extend
  model: ->
    firstName: "Max"
    lastName: "Jacobson"
    posts:
      [
        title: "Finished School"
        date:  "2013-08-23"
        body: "Wow that was fun!"
      ,
        title: "Starting school"
        date:  "2013-06-03"
        body: "Can't wait to start school!"
      ]

app.coffee

and


<script type="text/x-handlebars" data-template-name="index">
  <h2>
    {{model.firstName}} {{model.lastName}}&rsquo;s Blog
  </h2>
  {{#each post in model.posts}}
    <h2>{{post.title}}</h2>
    <p>{{post.date}}</p>
    <p>{{post.body}}</p>
  {{/each}}
  </ul>
</script>

part of index.html

And that takes that data from the CoffeeScript and puts it on the page. Which took a lot of trial and error actually.

Making that and writing this post was like a cup of coffee. My brain is now attenuated to learn it better tomorrow, to receive knowledge, perhaps via a lengthy article or book I’ll find and read. More posts to come as I dig deeper.

Here’s what I described in this post: http://codepen.io/maxjacobson/pen/uckIL

  1. the “c” flag means “compile” and the “w” flag means “watch” so together those will watch for new changes and re-compile