Using AppJs Mobile framework with Ember.js

AppjsEmber.md

Usage

$ bower install appjs --save

Reference app.js and app.css from your application, f.ex from index.html

<script type="text/javascript" src="/bower_components/appjs/kik-app.js"></script>
<script type="text/javascript" src="/bower_components/appjs/dist/app.css"></script>

Stylesheets

default.css (same as app.css), includes inline css images base.css excludes inline images and is useful for testing

Build

Simply concatenate all the files: cat src/*.js src/lib/*.js > appjs.js

Integration with popular Javascript MVC frameworks

To integrate with an MVC framework such as Ember.js (or Angular.js):

Have your router (or some other "action controller" function or object) call the respective KikApp page controller to do a page transition.

A template for a page

<div class="app-page" data-page="contact">
  <div class="app-topbar">
    <div class="app-title">Contact</div>
  </div>
  <div class="app-content">
    <div class="first-name">{{firstName}}</div>
    <div class="last-name">{{lastName}}</div>
  </div>
</div>

App.controller('contact', function (page) {
  // Leave it to Ember and handlebars to do the templating
  // $(page).find('.first-name').text(contact.firstName);
  // $(page).find('.last-name' ).text(contact.lastName );
});

From https://gist.github.com/cavneb/26c4a12b1f77ae868232

import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {
    return this.store.find('contact');
  },

  actions: {
    refresh: function() {
      Ember.run.later(this, function() {
      	// get some data

        this.store.find('contact').then(function(data) {

          // will cause the template to be evaluate and the mustaches {{}}
          // updated to reflect the incoming controller data
          this.controller.set('content', data);

          // Transition to the page and make it visible (and on top?)!
          App.load('contact');

        }.bind(this));
      }, 100);
    }
  }
});

The above route should of course be generalized in some manner...

Easy as pie ;)