CODEWITHSUNDEEP
javascriptember.js
Anonymous
Anonymous

Reputation: 6251

What do I need to actually get started with emberjs?

So I'm checking out Emberjs.

Scroll down a little on the homepage to "GETTING STARTED WITH EMBER.JS IS EASY."

Great, that looks simple, I'll give it a go.

Create a new boilerplate HTML5 file.

Paste their template code into my :

<body></body>

Include emberjs:

<script src="ember.js" type="text/javascript"></script>

Include the JS code they provided into a:

<script type="text/javascript"></script>

Within my head tags. Great, let's see what happens.

Load the page, Console tells me it requires jquery. So no problem I include jQuery. Try again, another error, I need to include handlebars. No problem, I include handlebars. Try again, App is not defined... right... so I include 

window.App = Ember.Application.create();

Above the snippet they provided. Try again, DS is not defined. At this point I have no idea where to go next. I took a look at the emberjs guides section as I assume I have to define a DS model somewhere, or something. But the guides were no use.

Am I missing something blatantly obvious, or is this in fact not 'easy' as they put it? What do I have to do to make this basic example work (and why the hell have they given 'basic' code that doesn't work out the box as an example)?

Edit:

My full code thus far:

<!DOCTYPE html>
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script src="handlebars.js" type="text/javascript"></script>
<script src="ember.js" type="text/javascript"></script>
<script type="text/javascript">
window.App = Ember.Application.create();
App.Person = DS.Model.extend({
  firstName: DS.attr('string'),
  lastName: DS.attr('string'),

  fullName: function() {
    return this.get('firstName') +
           " " + this.get('lastName');
  }.property('firstName', 'lastName')
});

App.peopleController = Em.ArrayController.create({
  content: App.Person.findAll()
});
</script>
</head>
<body>
<h1>People</h1>

<ul>
{{#each peopleController}}
  <li>Hello, <b>{{fullName}}</b>!</li>
{{/each}}
</ul>
</body>
</html>

Upvotes: 4

Views: 558

Answers (2)

Walt Stoneburner
Walt Stoneburner

Reputation: 2612

The problem isn't you, it's that the documentation neglects to list the required dependencies, the naming convention of Handlebars, and suddenly starts talking about a Post controller without providing the code. There's also a couple of places where there's a little bit of cognitive forward referencing going on, so if you know about EmberJs, the guide makes sense, but if you're trying to learning it fresh, you have to hop around, make assumptions, and conduct some tests.

While this isn't the minimal code needed for an EmberJS application, it should be enough to get you started to plug in about 80% of the Getting Started Guide. Hope this helps.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<script src="jquery-1.9.1.js"></script>
<script src="handlebars.js"></script>
<script src="ember-1.0.0-rc.1.js"></script>
</head>
<body>


<script language="javascript" type="text/javascript">

  // Make a global variable -- http://emberjs.com/guides/application/
  App = Ember.Application.create({
    VERSION: '1.0.0',
    // store: Ember.Store.create().from(Ember.fixtures)
  });

  // http://emberjs.com/api/classes/Ember.Application.html
  App.ready = function() {
    // alert("App initialized!");
  };

  // Application Controller, extended with custom properties
  App.ApplicationController = Ember.Controller.extend({
    appName: 'My First Example',

    firstName: "Charlie",
    lastName: "Brown",

    // initial value
    isExpanded: false,

    expand: function() {
      this.set('isExpanded', true);
    },

    contract: function() {
      this.set('isExpanded', false);
    }
  });


  // A router
  App.ApplicationRoute = Ember.Route.extend({
    setupController: function(controller) {
      // `controller` is the instance of ApplicationController
      controller.set('title', "Hello world!");
    }
  });


</script>


<script type="text/x-handlebars" data-template-name="application">
  <header>
    <h1>A Header - {{appName}}</h1>
  </header>

  <div>
  Hello, {{firstName}} {{lastName}}.
  <p/>

  {{#if isExpanded}}
    <div class='body'>{{body}}</div>
    <button {{action "contract"}}>Contract</button>
  {{else}}
    <button {{action "expand"}}>Show More...</button>
  {{/if}}

  <hr/>
  {{outlet}}
  <hr/>


  </div>

  <footer>
    <H1>A Footer</H1>
  </footer>
</script>


</body>
</html>

Upvotes: 2

DF_
DF_

Reputation: 3983

You do not need to define a DS store unless you have included Ember Data. I have the most basic Ember starting template available on jsfiddle. You can view the source of the rendered frame to get an idea that you only need 3 JS files (which you already have included) in order for the application to work.

From there it is up to you, but yes I admit that the documentation is lacking in regards to starting off from scratch.

From your edit, you have a DS object referenced, but you have not referenced the Ember Data script. It's currently an add-on to the default EmberJS script due to the fact that it is not API locked, whereas the main stream is locked.

Upvotes: 0

Related Questions