Angular

Reset

Angular

Knockout

Reset

The Presentation Model is for State

• Good
  • State Values
  • Computed Values
  • Simple Handlers
• Bad
  • DOM Manipulation
  • Business Logic
  • Ajax/Network Logic
    • State Lives in JavaScript not the DOM
    • When getting started people often try to put everything here
    • Usually works with the model
    • All about state, responding to domain events, Do not put business logic here

Good

App.StateController = Ember.ObjectController.extend({
  actions: {
    toggleEdit: function() { // Simple Event Handler
      this.toggleProperty('editing')
    },
    save: function() { // Delegate complex logic to services
      localStorageService.save(this.get('model'));
    }
  },
  editing: false,
  author: {}, // State
  authorName: function() { // Computed State
    var firstName = this.get('author.firstName');
    var lastName = this.get('author.lastName');
    return firstName + ' ' + lastName;
  }.property('author.firstName', 'author.lastName')
});

Bad

var viewModel = {
  toggleEdit: function() {
    $('.edit-controls').toggleClass('hide'); // DOM manupulation
    $('.view-panel').toggleClass('hide');
  },
  save: function() {
    var model = ko.toJS(this); // Complex logic
    localStorage.setItem(this.key, JSON.stringify(model));
  },
  load: function() {
    var self = this; // AJAX
    $.ajax(this.url).then(function() {
      self.author(data.author);
      self.title(data.title);
    });
  }
};

• Many times your arragement of state is specific to the screen
• In general Presentation models are not very reusable
• You want to move reusable logic out of the presentation model

Business Logic Belongs in Services

• Work with JavaScript Objects not the DOM
• Reusable
• Testable

Hints that your Code Belongs in a Service

• Ajax
• Transformation of Data
• Iteration or Underscore Methods
• Managing Promises
• Facade for 3rd party APIs

Logicless Templates

• Templates are about describing the relationship between data and the DOM
• You really want to keep logic in the presentation model
• If you find yourself wanting to add logic to the template you probably want to use a computed property

Bad

<label ng-app>Batting Average: {{hits / atBats}}</label>

<span data-bind="if: onsale || superCheap">
  Buy Me!
</span>

Unacceptable

<button ng-click="count = count + 1" ng-init="count=0">
  Increment
</button>

• Logic in templates is evil
• ember doesn't let you do this/ ember gets this 100% right

If/Else :)

{{#if inStock}}
  <button>Buy It Now!</button>
{{else}}
  <span>Sold Out!</span>
{{/if}}

Passing Arguments :)

<button {{action "buyItNow" item}}>✓</button>

<button ng-click="buyItNow($event, item)">
 Increment
</button>

Bad

<button ng-click="buyItNow($event, item || 'default')">
 Increment
</button>

Unless You are Using Knockout :(

<button data-bind="click: function(vm) {vm.something(foo); }">
  Do Something
</button>

Knockout

Angular Directive

$scope.price = 100;

<number-input ng-model="price"></number-input>

Ember Component

controller.set('price', 100);

{{number-input value=price}}

Bindings

• Respond to Observable Changes and Update the DOM
• Respond to Browser Events and Update the Observables

Wrap Existing UI Widgets in Binding

• Do not initialize widgets from a Presentation Model
• Think about what state you may need to expose
• Look for open canonical open source implementations

• When transition an old application to a data binding libarary
• Or just reusing an existing open source widget
• Most of the work is prolly done for you so google

Work With the Element You are Given

Good

Bad

init: function(element, valueAccessor) {
  element.addEventListener('focus', function() {
    $('label').addClass('hot-pink');
  });
  element.addEventListener('blur', function() {
    $('label').removeClass('hot-pink');
  });
}

Expose State as an Observable

Favorite Fruit:

• jQuery widgets
• Modals
• I want perform this action only when x is shown/hidden