Where TmwLand files live

CSS.css

// These live in app/assets/stylesheets/tmwland.scss
// and files below that.
 
// You'll probably make a file
// app/assets/stylesheets/tmwland/_XXXXX.scss
// and import it into the tmwland.scss file
 
// Put all your color definitions in tmwland/_colors.scss
// Don't worry too much about consolidating them, we'll clean up later (I think / hope!)

Data_Component.js

//lives in app/assets/javascripts/tmwland/data/**.js
Z.data.XXXX = flight.component(function() {
 
  this.defaultAttrs({
    contract: [
    // Add contracts
    ]
  });
 
  this.after("initialize", function() {
    var component = this;
  });
}, Z.mixins.Contract, Z.mixins.Templates, Z.mixins.MutableDefaults);

Initialization.js

Z.takeoff = function () {
   ... 
   ...
   ...
   // Then you attach your component
   Z.ui.XXXXX.attachTo("#the_id_of_the_div");
};

test.js

//This should go in the test/javascripts/ui.XXXX_test.js file
 
// Run the JS tests witH:
// rake test:javascripts
 
// OR
// rake test:javascript_server
// And open the browser at localhost:3040
 
zmodule("ui.XXX", {
  component: Z.ui.XXX,
  //
  // Here you add "test" helper methods if you wanted.
  // Could have a 'setup'
  // a teardown.
 
  });
 
test("NAME OF THE TEST (this is QUnit)", function() {
  this.$node = // is the DOM element
  this.component = //is the component.
 
  // Just trigger events on it like normal jQuery
  $(document).trigger('viewport.update', {  });
 
  // Then you can do tests on it. 
  ok( );
  equal( );
  
  // Look at sinon.spy()
  //....
});

UI_Component.js

//lives in app/assets/javascripts/tmwland/ui/**.js

Z.ui.XXXXXXX = flight.component(function() {
 
  this.defaultAttrs({
    contract: [
    // Add contracts
    ]
  });
 
  this.after("initialize", function() {
    var component = this;
 
    component.view = new Ractive({
      el: component.$node,
      template: component.get_template("WHICHONE?"),
      noIntro: true,
      data: {
        // Add data
      }
    });
  });
}, Z.mixins.Contract, Z.mixins.Templates, Z.mixins.MutableDefaults);