Code Monkey home page Code Monkey logo

ember-data-starter-kit's Introduction

Ember Data Starter Kit

Here is a very simple Ember Data starter kit based on the following libraries

  • Ember 1.0.0-rc.3
  • Ember Data 3caadcc (2013-04-26 11:07:32 -0700)
  • Handlebars 1.0.0-rc.3
  • jQuery 1.9.1

What does it do?

It will demonstrate retrieving some simple JSON from a REST API and displaying it as HTML.

Do I have to install anything?

Probably not. However, you'll need a web server capable of serving files. For ease of use I tend to use the SimpleHTTPServer that comes with python and is available by default in Mac OS. However, you might prefer Node.js, nginx or Apache. Anyway, just get a web server to point at the project directory and you'll be fine.

If you go with the Python approach, just issue this at the project root

python -m SimpleHTTPServer

then navigate to localhost:8000. Port 8000 is the default for Python rather than 8080.

What am I seeing?

If you see the text "This is the post you're looking for!" then you're in business.

Nope not seeing that...

You'll need to do some debugging.

  • Most likely you're not viewing index.html through a server (same origin problem)
  • Don't go changing the .js files - compatibility in the release candidates is fraught with hazard
  • Check the JavaScript console in your browser. Chrome and Firefox have comprehensive debugging tools.

Yay! I'm in business! What's going on?

Let's work it back from the front end to the server

  1. The file index.html got loaded and a bunch of scripts were initialized
  2. The section script with data-template-name="application" is the HTML output for the Ember application
  3. The section script with data-template-name="index" is the HTML template for the post

OK, and where's the JavaScript?

All the magic happens in app.js take a look at the comments and you'll see how it fits together.

  1. The application will log to the browser console
  2. There is a model called Post with a title and body linked to a data store
  3. There is a simple route that only gets the Post with id=1 (the path posts is implied through Ember naming conventions)
  4. The RESTAdapter is configured to create URL paths using the template /api/posts/{id}.json which makes the simulated RESTful API easier
  5. The data store uses Ember Data revision 12 and references the RESTAdapter

Well that was easy! What next?

For a much bigger scale application involving a Maven-built Dropwizard back end combined with a Grunt.js-built front end see my other public repos (TODO).

ember-data-starter-kit's People

Contributors

gary-rowe avatar

Stargazers

Angus H. avatar Abhishek B. avatar

Watchers

Chris Gonzales avatar James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.