Sidebar - Simple Ember view.

index.html

<div id="mapContainer">
  <!-- renders map.hbs automatically (if it exists) -->
  {{view App.MapView}}
  <!-- renders sidebar.hbs automatically (if it exists) -->
  {{view App.SidebarView}}
</div>

SidebarView.js

App.SidebarView = Ember.View.extend({
  templateName: "sidebar",
  elementId: "sidebar",
  // These are bindings between classes and view properties, sweet!
  classNameBindings: ["position", "isVisible"],
  position: "right",
  isVisible: true,
  settings: null,
  // Called after the element is created but 
  // right before it's inserted into the DOM
  init: function () {
    // Make sure to call this, or some Ember magic will be missed (trouble)
    this._super();
    // Settings.json, pulled in earlier in App.initSettings()
    var settings = App.get("settings").map.sidebar;
    
    // Using setters and getters guarantees that the bindings work as they should.
    this.set("position", settings.position);
    this.set("isVisible", settings.visible); 
    this.set("settings", settings);
  }
});