Pie Guide

_super.js

var A = pie.base.extend({
  init: function(){
    console.log('A');
    this._super();
  }
});

var B = A.extend({
  init: function() {
    this._super();
    console.log('B1');
  }
}, {
  init: function() {
    console.log('B2');
    this._super();
  }
});

var C = B.extend({
  init: function() {
    console.log('C');
    this._super();
  }
});

new C();
//=>  "C" 
//=>  "B2"
//=>  "A"
//=>  "B1"

_superGotcha.js

// This WILL NOT work.
pie.activeView.extend('AjaxView', {
  
  setup: function() {
    this.loadModel(function() {
      // this._super is no longer guaranteed to refernce the same function
      // as it did when setup began.
      this._super();
    }.bind(this));
  },
  
  loadModel: function(cb) {
    app.ajax.get(...).success(cb);
  },
});

// This WILL work
pie.activeView.extend('AjaxView', {
  
  setup: function() {
    // grab a local reference to _super.
    var sup = this._super.bind(this);
    this.loadModel(function() {
      // use the local reference instead of this._super
      sup();
    });
  },
  
  loadModel: function(cb) {
    app.ajax.get(...).success(cb);
  },
});

// This WILL work
pie.activeView.extend('AjaxView', {
  
  setup: function() {
    // just pass this._super as the callback
    this.loadModel(this._super.bind(this));
  },
  
  loadModel: function(cb) {
    app.ajax.get(...).success(cb);
  },
});

activeViewModel.js

HeaderNav = pie.activeView.extend('HeaderNav', {
  init: function() {
    this.model = window.currentUser;
    this._super({
      autoRender: 'id'
    });
  },
  
  templateName: function() {
    return this.model.is('id') ? 'loggedInNav' : 'loggedOutNav';
  }
  
});
// HeaderNav's template will receive window.currentUser.data as it's "data" object.
// HeaderNav instances will rerender anytime the currentUser's id changes.

activeViewTemplates.js

genericView = pie.activeView.create({ template: 'genericTemplateName' });
genericView.setup();

genericView.el.innerHTML
//=> "Content of the genericTemplateName template"

// -------

HeaderNav = pie.activeView.extend('HeaderNav', {
  templateName: function() {
    return window.currentUser.is('id') ? 'loggedInNav' : 'loggedOutNav';
  }
});

appInstance.js

window.app = pie.app.create();

appInstanceWithRouterClass.js

pie.app.create({
  i18n: myCustomI18nClass.create(),
  router: myCustomRouterClass,
  routerOptions: {
    root: '/foo/'
  }
});

appInstanceWithRouterFalse.js

pie.app.create({
  router: false
});

appInstanceWithRouterOptions.js

pie.app.create({
  routerOptions: {
    root: '/foo/'
  }
})

classWithMixin.js

User = pie.model.extend('User', {
  
  init: function(data, options) {
    this._super(data, options);
    
    this.validates({
      'firstName' : {presence: true},
      'lastName'  : {presence: true},
      'email'     : {email: true}
    });
  }
  
}, pie.mixins.validatable);

gettingStartedExample.html

<script type="text/pie-template" id="home">
  <p>Hello, world!, read some <a href="[%= h.path('docs') %]">docs</a>!</p>
</script>

<script type="text/pie-template" id="docs">
  <p>Lorem ipsum. Back to <a href="[%= h.path('home') %]">home</a>!</p>
</script>

<script>
  window.app = pie.app.create();
  
  app.router.map({
    '/'     : {view: 'home', name: 'home'},
    '/docs' : {view: 'docs', name: 'docs'}
  });
  
  pie.ns('lib.views').home = pie.activeView.extend({templateName: 'home'});
  pie.ns('lib.views').docs = pie.activeView.extend({templateName: 'docs'});
</script>

modelAccessors.js

var model = new pie.model({
  firstName: 'Doug', 
  lastName: 'Wilson'
});

model.get('firstName')
//=> "Doug"

model.get('lastName')
//=> "Wilson"

model.set('lastName', 'Hanks')
model.get('lastName')
// => "Hanks"

model.sets({
  firstName: "Tom",
  lastName: "Harry"
})

model.get('firstName')
//=> "Tom"

model.get('lastName')
// => "Harry"

model.gets('firstName', 'lastName')
// => {firstName: "Tom", lastName: "Harry"}

modelComputed.js

var m = new pie.model({
  firstName: "Doug",
  lastName: "Wilson"
});

m.compute("fullName", function(){
  return this.get("firstName") + " " + this.get("lastName");
}, "firstName", "lastName");

m.get("fullName");
// => "Doug Wilson"

m.set("firstName", "Owen");

m.get("fullName");
// => "Owen Wilson"

modelComputed2.js

var User = pie.model.extend({
  init: function(data, options) {
    this._super(data, options);
    this.compute('fullName', 'firstName', 'lastName');
  },
  fullName: function() {
    return this.get('firstName') + ' ' + this.get('lastName');
  }
});

var u = new User({firstName: 'Doug', lastName: 'Wilson'});
u.get('fullName')
// => "Doug Wilson"

modelObserver.js

var model = new pie.model();

var everythingObserver = function(changeSet) {
  console.log("Everything");
};

var fooObserver = function(changeSet) {
  console.log("Foo");
}

var barObserver = function(changeSet) {
  console.log("Bar");
}

var fooAndBarObserver = function(changeSet) {
  if(changeSet.hasAll('foo', 'bar')) {
    console.log("FooAndBar");
  }
}

var fooOrBarObserver = function(changeSet) {
  if(changeSet.hasAny('foo', 'bar')) {
    console.log("FooOrBar");
  }
}


model.observe(everythingObserver);
model.observe(fooObserver, 'foo');
model.observe(barObserver, 'bar');
model.observe(fooAndBarObserver, 'foo', 'bar');
model.observe(fooOrBarObserver, 'foo', 'bar');

model.set("baz", 1);
// => "Everything"

model.set("foo", 1);
// => "Everything"
// => "Foo"
// => "FooOrBar"

model.sets({foo: 2, bar: 2})
// => "Everything"
// => "Foo"
// => "Bar"
// => "FooOrBar"
// => "FooAndBar"

modelPaths.js

var model = new pie.model();

model.set('location.city', 'San Francisco');
model.get('location');
// => {city: "San Francisco"}
model.get('location.city');
// => "San Francisco"

model.sets({
  location: {
    lat: 37.777,
    lng: -122.444
  }
});

model.get('location')
// => {lat: 37.777, lng: -122.444}

model.get('location.city')
// => undefined

model.merge({
  location: {
    foo: 'bar'
  }
});

model.get('location')
// => {foo: 'bar', lat: 37.777, lng: -122.444}

newClass.js

myClass = pie.base.extend();

reopen.js

User = pie.model.extend();
u = new User({firstName: 'John', lastName: 'Smith'});

User.prototype.surname
//=> undefined

u.surname;
//=> undefined

User.reopen({
  surname: function() {
    return this.get('lastName');
  }
});

User.prototype.surname
//=> function(){...}
u.surname;
//=> function(){...}
u.surname();
//=> 'Smith'

User.reopen({
  surname: function() {
    return this._super().toUpperCase();
  }
});

u.surname();
//=> 'SMITH'

u.reopen({
  surname: function() {
    return this._super() + ' Jr.';
  }
});

u.surname();
//=> "SMITH Jr."

u2 = new User({firstName: 'Kevin', lastName: 'Bacon'});
u2.surname();
//=> "BACON"

routerMappings.js

app.router.map({
  '/basic/path'        : {view: 'foo'},
  '/complex/:id/path'  : {view: 'bar'}
});

view.js

linkTrackerView = pie.view.extend('linkTrackerView', {
  init: function(options) {
    this._super(options);
    this.clicks = [];
    this.on('click', 'a', 'onLinkClick');
    
  },
  
  onLinkClick: function(e) {
    var a = e.delegateTarget;
    this.clicks.push({
      {
        href: a.href,
        text: a.innerHTML
      }
    });
  }
});

var tracker = linkTrackerView.create({el: document.body});
tracker.clicks;
// => []

// click on a link...

// => [{href: "/", text: "home"}]