Permalink
Browse files

Resolve merge conflict to add syntax highlighting to readme

  • Loading branch information...
1 parent 0d9cb63 commit e99d62c6dc564a9b8ad71494e77180bb3b9b1c38 Tom Dale committed Dec 13, 2011
Showing with 42 additions and 35 deletions.
  1. +42 −35 README.md
View
@@ -16,64 +16,71 @@ Use bindings to keep properties between two different objects in sync. You just
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'
- });
-
- MyApp.country.get('presidentName');
- // "Barack Obama"
-
+```javascript
+MyApp.president = Ember.Object.create({
+ name: "Barack Obama"
+});
+
+MyApp.country = Ember({
+ // Ending a property with 'Binding' tells Ember.js to
+ // create a binding to the presidentName property.
+ presidentNameBinding: 'MyApp.president.name'
+});
+
+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.create({
- firstName: "Barack",
- lastName: "Obama",
+``` javascript
+MyApp.president = Ember.Object.create({
+ firstName: "Barack",
+ lastName: "Obama",
- fullName: function() {
- return this.get('firstName') + ' ' + this.get('lastName');
+ fullName: function() {
+ return this.get('firstName') + ' ' + this.get('lastName');
- // Call this flag to mark the function as a property
- }.property()
- });
+ // Call this flag to mark the function as a property
+ }.property()
+});
- MyApp.president.get('fullName');
- // "Barack Obama"
+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.create({
- firstName: "Barack",
- lastName: "Obama",
+``` javascript
+MyApp.president = Ember.Object.create({
+ firstName: "Barack",
+ lastName: "Obama",
- fullName: function() {
- return this.get('firstName') + ' ' + this.get('lastName');
+ fullName: function() {
+ return this.get('firstName') + ' ' + this.get('lastName');
- // Tell Ember.js that this computed property depends on firstName
- // and lastName
- }.property('firstName', '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>
+``` html
+<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.

0 comments on commit e99d62c

Please sign in to comment.