Techsession Beispiele

The latest build of Ember.

by mavilein

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.2/ember.js"></script>
<script type="text/x-handlebars" data-template-name="index">
  <h2>Index Content:</h2>
  <ul>
  {{#each person in controller}}
      <li>{{person.fullName}} 
          <a {{action modifyName person}} href="#">(modifyName)</a>
      </li>
  {{/each}}
   </ul>
    <p>allFirstNames: {{allFirstNames}}</p>
</script>

CSS

ul { padding: 15px; font-size: 1.4em; color: green; }

JavaScript

App = Ember.Application.create({});

App.IndexController = Ember.ArrayController.extend({
    modifyName : function(person){
        var fn = person.get("firstName");
        person.set("firstName", fn + "!");
    },
    allFirstNames : function(){
        var ret = this.reduce(function(previous, person){
            return previous + " " + person.get("firstName")
        }, "");
        return ret;
    }.property("[email protected]")
});
App.IndexRoute = Ember.Route.extend({
    setupController: function(controller) {
        controller.set("content",[]);
        controller.addObject(tom);
        controller.addObject(me);
    }
});

Person = Ember.Object.extend({
  // these will be supplied by `create`
  firstName: null,
  lastName: null,

  fullName: function() {
    var firstName = this.get('firstName');
    var lastName = this.get('lastName');

   return firstName + ' ' + lastName;
  }.property('firstName', 'lastName')
});
var tom = Person.create({
    firstName: "Tom",
    lastName: "Dale"
});
var me = Person.create({
    firstName: "Marcus",
    lastName : "Böhm"
});