Code Monkey home page Code Monkey logo

ember.js's Introduction

Ember.js Build Status

Ember.js is a JavaScript framework that does all of the heavy lifting that you'd normally have to do by hand. There are tasks that are common to every web app; Ember.js does those things for you, so you can focus on building killer features and UI.

These are the three features that make Ember.js a joy to use:

  1. Bindings
  2. Computed properties
  3. Auto-updating templates

Bindings

Use bindings to keep properties between two different objects in sync. You just declare a binding once, and Ember.js will make sure changes get propagated in either direction.

Here's how you create a binding between two objects:

MyApp.president = Ember.Object.create({
  name: "Barack Obama"
});

MyApp.country = Ember.Object.create({
  // Ending a property with 'Binding' tells Ember.js to
  // create a binding to the presidentName property.
  presidentNameBinding: 'MyApp.president.name'
});

// Later, after Ember has resolved bindings...
MyApp.country.get('presidentName');
// "Barack Obama"

Bindings allow you to architect your application using the MVC (Model-View-Controller) pattern, then rest easy knowing that data will always flow correctly from layer to layer.

Computed Properties

Computed properties allow you to treat a function like a property:

MyApp.President = Ember.Object.extend({
  firstName: "Barack",
  lastName: "Obama",

  fullName: function() {
    return this.get('firstName') + ' ' + this.get('lastName');

    // Call this flag to mark the function as a property
  }.property()
});

MyApp.president = MyApp.President.create();
MyApp.president.get('fullName');
// "Barack Obama"

Treating a function like a property is useful because they can work with bindings, just like any other property.

Many computed properties have dependencies on other properties. For example, in the above example, the fullName property depends on firstName and lastName to determine its value. You can tell Ember.js about these dependencies like this:

MyApp.President = Ember.Object.extend({
  firstName: "Barack",
  lastName: "Obama",

  fullName: function() {
    return this.get('firstName') + ' ' + this.get('lastName');

    // Tell Ember.js that this computed property depends on firstName
    // and lastName
  }.property('firstName', 'lastName')
});

Make sure you list these dependencies so Ember.js knows when to update bindings that connect to a computed property.

Auto-updating Templates

Ember.js uses Handlebars, a semantic templating library. To take data from your JavaScript application and put it into the DOM, create a <script> tag and put it into your HTML, wherever you'd like the value to appear:

<script type="text/x-handlebars">
  The President of the United States is {{MyApp.president.fullName}}.
</script>

Here's the best part: templates are bindings-aware. That means that if you ever change the value of the property that you told us to display, we'll update it for you automatically. And because you've specified dependencies, changes to those properties are reflected as well.

Hopefully you can see how all three of these powerful tools work together: start with some primitive properties, then start building up more sophisticated properties and their dependencies using computed properties. Once you've described the data, you only have to say how it gets displayed once, and Ember.js takes care of the rest. It doesn't matter how the underlying data changes, whether from an XHR request or the user performing an action; your user interface always stays up-to-date. This eliminates entire categories of edge cases that developers struggle with every day.

Getting Started

For new users, we recommend downloading the Ember.js Starter Kit, which includes everything you need to get started.

Building Ember.js

NOTE: Due to the rename, these instructions may be in flux

  1. Run bundle install to fetch the necessary ruby gems.
  2. Run rake dist to build Ember.js. Two builds will be placed in the dist/ directory.
  • ember.js and ember.min.js - unminified and minified builds of Ember.js

If you are building under Linux, you will need a JavaScript runtime for minification. You can either install nodejs or gem install therubyracer.

How to Run Unit Tests

Setup

  1. Install Ruby 1.9.2+. There are many resources on the web can help; one of the best is rvm.

  2. Install Bundler: gem install bundler

  3. Run bundle inside the project root to install the gem dependencies.

In Your Browser

  1. To start the development server, run rackup.

  2. Then visit: http://localhost:9292/?package=PACKAGE_NAME. Replace PACKAGE_NAME with the name of the package you want to run. For example:

To run multiple packages, you can separate them with commas. You can run all the tests using the all package:

http://localhost:9292/?package=all

You can also pass jquery=VERSION in the test URL to test different versions of jQuery. Default is 1.9.0.

From the CLI

  1. Install phantomjs from http://phantomjs.org

  2. Run rake test to run a basic test suite or run rake test[all] to run a more comprehensive suite.

  3. (Mac OS X Only) Run rake autotest to automatically re-run tests when any files are changed.

Building API Docs

The Ember.js API Docs provide a detailed collection of methods, classes, and viewable source code.

NOTE: Requires node.js to generate.

See http://emberjs.com/ for annotated introductory documentation.

Preview API documenation

Build API documentation

  • From the website repo, run rake build

  • The website, along with documentation will be built into the build directory

ember.js's People

Contributors

bradleypriest avatar colincampbell avatar darthdeus avatar dgeb avatar digitaltoad avatar ebryn avatar edtsech avatar ef4 avatar ghempton avatar hjdivad avatar jbrown avatar joewest avatar joliss avatar jtaby avatar krisselden avatar lukemelia avatar nragaz avatar pangratz avatar peterik avatar raycohen avatar rlivsey avatar stefanpenner avatar tbartelmess avatar tchak avatar tomdale avatar trek avatar trevor avatar tricknotes avatar wagenet avatar wycats avatar

Watchers

 avatar  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.