Ricardo Mendes locks

Ember Components Example

With the select element using an opacity of zero (0), the element can have a custom background, and when clicking on the element the hidden select box still behaves normally (browser's default behavior)
The element with the class .faux-select-selected needs javascript functionality which updates the content binding to the value that is selected using the invisble select box (on change).

(clone the emberjs/starter-kit to get started, see the components branch on this clone of starter kit...https://github.com/Ember-SC/starter-kit/commits/components)

Start with removing the default index template/model from the emberjs/starter-kit

A future version of Ember will come with a new templating engine known as HTMLBars.

The original motivation for HTMLBars was to allow helpers and properties to have better contextual information about what they were bound to.

So for example, consider a template like this:

<a href="{{url}}">{{link}}</a>

In a client library reading TCP, there are constraints.

Latency:
- up <- larger frames, more batching
- down <- smaller frames, send without waiting in buffers, disable nagles' algorithm
Throughput:
- up <- larger frames, more batching
- down <- smaller frames, less batching
Slow connections:

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Building a router</title>
	<script>
	// Put John's template engine code here...

	(function () {
	// A hash to store our routes:

	(ns noodle.core)

	(defn history-line->command
	"Returns the command from a zsh_history-style line"
	[line]
	(nth (clojure.string/split line #"\s+") 2))

	(defn weight
	"Returns a number representing how much time you've spent typing a command"
	[command invocation-count]

	App.Router.map(function() {
	this.resource('post', { path: '/posts/:post_id' });
	});

	App.PostRoute = Ember.Route.extend({
	model: function(params) {
	return this.store.find('post', params.post_id);
	}
	});

	/* global google */
	var GoogleMapComponent = Ember.Component.extend({
	places: [],
	width: 500,
	height: 500,

	attributeBindings: ['style'],

	style: function () {
	return 'width:'+this.width+'px; height:'+this.height+'px';

	/*
	Example usage:

	import logger from "app/system/logger";
	var LOG = logger.loggerFor("topic"');

	LOG.log({
	event: "data received",
	secondary: {
	resource: "photo",

	# Make sure to do detection so it will gracefully downgrade like:
	# begin
	require 'psych'

	Psych.add_domain_type(nil, 'code') { \|_,hash\|
	p hash['ruby']
	}
	# rescue
	# do 1.8 stuff
	# end