dustinsmith1024/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.6/ember.min.js"></script>
  <script src="http://builds.emberjs.com.s3.amazonaws.com/ember-data-latest.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
    <script type="text/x-handlebars">
    <h2>Welcome</h2>
    {{#linkTo 'articles' }}Articles{{/linkTo}}
    {{outlet}}
  </script>


  <script type="text/x-handlebars" data-template-name="index">
    Could put some links here
    <ul class="well span4">

    {{#each item in model}}
      <li>{{item}}</li>
    {{/each}}
    </ul>
  </script>

  <script type="text/x-handlebars" data-template-name="articles">
  <div class="well span4">
  <h1>{{title}}</h1>
    <ul>
      {{#each model}}
        {{#view App.ClickableView}}
        <li>{{#linkTo 'articles.view' this}}
          {{render "article_summary" this}}
          {{/linkTo}}</li>
        {{/view}}
      {{/each}}
      <li><a href="#" {{action createArticle}}>New Article</a></li>
    </ul>
  </div>
    <div class="well span8">{{outlet}}</div>
  </script>

  <script type="text/x-handlebars" data-template-name="article_summary">
     {{name}} - {{date}} ({{authorName}})
  </script>

  <script type="text/x-handlebars" data-template-name="articles/view">
    {{render "article_summary" model}}
    <p>{{model.content}}</p>
    <h2>{{model.urll}}</h2>


    <iframe {{bindAttr src="model.url"}} >
    You has no iframe
   </iframe>

    <nav>
      {{#linkTo 'articles.edit' model}}Edit{{/linkTo}}
    </nav>
  </script>


  <script type="text/x-handlebars" data-template-name="articles/edit">
   <h3>Edit:</h3>
     {{render "article_summary" model}}

     <form class="form" {{action save on="submit"}}>
      <label>Name: {{ input type="text" value=model.name}}</label>
      <label>Date: {{input type="date" value=model.date}}</label>

      <label>Content: {{textarea value=model.content}}</label>
      <button type="submit" class="btn btn-primary">Done</button>
  </form>
      <nav>
        {{#linkTo 'articles.view' model}}Back to Articles{{/linkTo}}
      </nav>
  </script>

  <script type="text/javascript">
App = Ember.Application.create();

App.Router.map(function() {
  this.resource("articles", function() {
   this.route("edit", { path: '/:article_id/edit' });
   this.route("view", { path: '/:article_id' });
  });

});
/*
App.Router.map(function() {
  this.resource("articles", function(){
    this.route("show", { path: "/:article_id" });
  });
});*/

/*
App.Router.map(function() {
  this.resource("articles", function(){
    this.resource("article", { path: '/:id' });
  });
});
*/

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return ['red', 'yellow', 'blue'];
  }
});

//App.Article = Ember.Object.extend({
//  name: '',
//  day: ''
//});

App.Store = DS.Store.extend({
  adapter: DS.FixtureAdapter.create()
});

App.Article = DS.Model.extend({
  name: DS.attr('string'),
  date: DS.attr('date'),
  authorFirstName: DS.attr('string'),
  authorLastName: DS.attr('string'),
  content: DS.attr('string'),
  url: DS.attr('string'),

  authorName: function() {
    return this.get('authorFirstName') + ' ' + this.get('authorLastName');
  }.property('authorFirstName', 'authorLastName')
});

App.Article.FIXTURES = [
  { id: 1, name: 'Trek', date: '2012-03-04', authorFirstName: 'Dustin', authorLastName:'Smith', content: 'this is the article!!!', url: 'http://espn.com' },
  { id: 2, name: 'Tom', date: '2013-03-05', authorFirstName: 'Justin', authorLastName:'Hegg' , content: 'this is the article', url: 'http://smith1024.com' }
];

App.ArticlesRoute = Ember.Route.extend(
  {//Not sure why but its forcing me to define these routes
    model: function() {
      console.log('articlesss');
      return App.Article.find();
    },
    events: {
      createArticle: function(){
        var articles = this.modelFor('articles');
        console.log(articles);
        var article = App.Article.createRecord({id: articles.length});
        this.transitionTo('articles.edit', article);
      }
    }
  }
  );

App.ArticlesViewRoute = Ember.Route.extend(
  {
    model: function(params) {
      console.log(params);
      return App.Article.find(params.article_id);
    }
});

App.ArticlesEditRoute = Ember.Route.extend(
  {
    model: function(params) {
      console.log(params);
      return App.Article.find(params.article_id);
    },
    events: {
      save: function(){
        console.log('save!');
         var article = this.modelFor('articles.edit');
        this.transitionTo('articles.view', article);
      }
    }
});

App.ClickableView = Ember.View.extend({
  click: function(evt) {
    alert("ClickableView was clicked!");
  }
});

//Use controller to set things up
App.ArticlesController = Ember.ArrayController.extend({
  title: 'Articles'
});


  </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery.min.js"></script>
	<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
	<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
	<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.6/ember.min.js"></script>
	<script src="http://builds.emberjs.com.s3.amazonaws.com/ember-data-latest.js"></script>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	</head>
	<body>
	<script type="text/x-handlebars">
	<h2>Welcome</h2>
	{{#linkTo 'articles' }}Articles{{/linkTo}}
	{{outlet}}
	</script>



	<script type="text/x-handlebars" data-template-name="index">
	Could put some links here
	<ul class="well span4">

	{{#each item in model}}
	<li>{{item}}</li>
	{{/each}}
	</ul>
	</script>

	<script type="text/x-handlebars" data-template-name="articles">
	<div class="well span4">
	<h1>{{title}}</h1>
	<ul>
	{{#each model}}
	{{#view App.ClickableView}}
	<li>{{#linkTo 'articles.view' this}}
	{{render "article_summary" this}}
	{{/linkTo}}</li>
	{{/view}}
	{{/each}}
	<li><a href="#" {{action createArticle}}>New Article</a></li>
	</ul>
	</div>
	<div class="well span8">{{outlet}}</div>
	</script>

	<script type="text/x-handlebars" data-template-name="article_summary">
	{{name}} - {{date}} ({{authorName}})
	</script>

	<script type="text/x-handlebars" data-template-name="articles/view">
	{{render "article_summary" model}}
	<p>{{model.content}}</p>
	<h2>{{model.urll}}</h2>


	<iframe {{bindAttr src="model.url"}} >
	You has no iframe
	</iframe>

	<nav>
	{{#linkTo 'articles.edit' model}}Edit{{/linkTo}}
	</nav>
	</script>


	<script type="text/x-handlebars" data-template-name="articles/edit">
	<h3>Edit:</h3>
	{{render "article_summary" model}}

	<form class="form" {{action save on="submit"}}>
	<label>Name: {{ input type="text" value=model.name}}</label>
	<label>Date: {{input type="date" value=model.date}}</label>

	<label>Content: {{textarea value=model.content}}</label>
	<button type="submit" class="btn btn-primary">Done</button>
	</form>
	<nav>
	{{#linkTo 'articles.view' model}}Back to Articles{{/linkTo}}
	</nav>
	</script>

	<script type="text/javascript">
	App = Ember.Application.create();

	App.Router.map(function() {
	this.resource("articles", function() {
	this.route("edit", { path: '/:article_id/edit' });
	this.route("view", { path: '/:article_id' });
	});

	});
	/*
	App.Router.map(function() {
	this.resource("articles", function(){
	this.route("show", { path: "/:article_id" });
	});
	});*/

	/*
	App.Router.map(function() {
	this.resource("articles", function(){
	this.resource("article", { path: '/:id' });
	});
	});
	*/

	App.IndexRoute = Ember.Route.extend({
	model: function() {
	return ['red', 'yellow', 'blue'];
	}
	});

	//App.Article = Ember.Object.extend({
	// name: '',
	// day: ''
	//});

	App.Store = DS.Store.extend({
	adapter: DS.FixtureAdapter.create()
	});

	App.Article = DS.Model.extend({
	name: DS.attr('string'),
	date: DS.attr('date'),
	authorFirstName: DS.attr('string'),
	authorLastName: DS.attr('string'),
	content: DS.attr('string'),
	url: DS.attr('string'),

	authorName: function() {
	return this.get('authorFirstName') + ' ' + this.get('authorLastName');
	}.property('authorFirstName', 'authorLastName')
	});

	App.Article.FIXTURES = [
	{ id: 1, name: 'Trek', date: '2012-03-04', authorFirstName: 'Dustin', authorLastName:'Smith', content: 'this is the article!!!', url: 'http://espn.com' },
	{ id: 2, name: 'Tom', date: '2013-03-05', authorFirstName: 'Justin', authorLastName:'Hegg' , content: 'this is the article', url: 'http://smith1024.com' }
	];

	App.ArticlesRoute = Ember.Route.extend(
	{//Not sure why but its forcing me to define these routes
	model: function() {
	console.log('articlesss');
	return App.Article.find();
	},
	events: {
	createArticle: function(){
	var articles = this.modelFor('articles');
	console.log(articles);
	var article = App.Article.createRecord({id: articles.length});
	this.transitionTo('articles.edit', article);
	}
	}
	}
	);

	App.ArticlesViewRoute = Ember.Route.extend(
	{
	model: function(params) {
	console.log(params);
	return App.Article.find(params.article_id);
	}
	});

	App.ArticlesEditRoute = Ember.Route.extend(
	{
	model: function(params) {
	console.log(params);
	return App.Article.find(params.article_id);
	},
	events: {
	save: function(){
	console.log('save!');
	var article = this.modelFor('articles.edit');
	this.transitionTo('articles.view', article);
	}
	}
	});

	App.ClickableView = Ember.View.extend({
	click: function(evt) {
	alert("ClickableView was clicked!");
	}
	});

	//Use controller to set things up
	App.ArticlesController = Ember.ArrayController.extend({
	title: 'Articles'
	});


	</script>
	</body>
	</html>