with json data

swatijadhav · Jun 29, 2014 · bce58f0 · bce58f0
commit bce58f0
Show file tree

Hide file tree

Showing 13 changed files with 43,154 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,5 @@
+### emberreddit
+
+A small example of how to use Ember.js without using Ember Data.
+
+This was created for a [tutorial blog post](http://eviltrout.com/2013/03/23/ember-without-data.html) by Evil Trout.
diff --git a/css/bootstrap.min.css b/css/bootstrap.min.css
diff --git a/css/emberreddit.css b/css/emberreddit.css
@@ -0,0 +1,60 @@
+html {
+  overflow-y: scroll;
+}
+
+body {
+	margin-top: 70px;
+}
+
+h2.subreddit {
+  margin-bottom: 30px;
+}
+
+section.reddit-links {
+  margin-bottom: 100px;
+}
+
+.reddit-link {
+	margin-bottom: 10px;
+}
+
+.reddit-link .domain {
+  font-size: 10px;
+}
+
+ul.dropdown-menu a.active {
+  color: #333;
+  font-weight: bold;
+}
+
+ul.dropdown-menu a.active:hover {
+  color: white;
+}
+
+.link-view {
+  position: fixed;
+  top: 70px;
+  width: 600px;
+  height: 500px;
+  background-color: white;
+  padding: 10px 20px;
+  z-index: 100;
+  border: 10px solid #eee;
+  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
+}
+
+.link-view .close {
+  float: right;
+  font-size: 15px;
+}
+
+.link-view h1 {
+  font-size: 20px;
+  margin: 0 0 10px 0;
+  line-height: 23px;
+}
+
+.link-view img {
+  max-width: 750px;
+  max-height: 330px;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset=utf-8 />
+<title>Ember Reddit Example</title>
+  <link rel="stylesheet" href="css/bootstrap.min.css">
+  <link rel="stylesheet" href="css/emberreddit.css">
+</head>
+<body>
+
+  <script type='text/x-handlebars' data-template-name="application">
+    <div class="navbar navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+          </a>
+          {{#linkTo 'index' class="brand"}}emberreddit{{/linkTo}}
+
+          <div class="nav-collapse collapse" id="main-menu">
+            <ul class="nav" id="main-menu-left">
+            <li class="dropdown">
+              <a class="dropdown-toggle" data-toggle="dropdown" href="#">subreddits <b class="caret"></b></a>
+              <ul class="dropdown-menu" id="swatch-menu">
+                {{#each subreddit in subreddits}}
+                  <li>{{#linkTo 'subreddit' subreddit}}{{subreddit.title}}{{/linkTo}}</li>
+                {{/each}}
+              </ul>
+            </li>
+            </ul>
+          </div>
+
+        </div>
+      </div>
+    </div>
+
+     <div class="container">
+      {{outlet}}
+     </div>
+   </script>
+
+  <script type="text/x-handlebars" data-template-name="subreddit">
+    <h2 class='subreddit'>{{title}}</h2>
+    {{outlet}}
+
+    <section class='reddit-links'>
+      {{#each link in links}}
+        <div class='row reddit-link'>
+          {{#if link.thumbnailUrl}}
+            <div class="span1">
+              {{#linkTo 'link' link}}<img {{bindAttr src="link.thumbnailUrl"}}>{{/linkTo}}
+            </div>
+          {{/if}}
+          <div class="span7">
+            {{#linkTo 'link' link}}{{link.title}}{{/linkTo}}
+            <span class='domain'>({{link.domain}})</span>
+          </div>
+        </div>
+      {{/each}}
+    </section>
+  </script>
+
+  <script type="text/x-handlebars" data-template-name="link">
+    <div class='link-view'>
+      {{#linkTo 'subreddit' model.subreddit class="close"}}close{{/linkTo}}
+      <h1>{{title}}</h1>
+      {{#if image}}
+        <center><img {{bindAttr src="imageUrl"}}></center>
+      {{else}}
+        {{#if embed}}
+          {{{embed}}}
+        {{/if}}
+      {{/if}}
+    </div>
+  </script>
+
+  <script src="js/libs/jquery-1.9.1.js"></script>
+  <script src="js/libs/handlebars-1.0.0-rc.4.js"></script>
+  <script src="js/libs/ember-1.0.0-rc.6.js"></script>
+  <script src="js/libs/bootstrap.min.js"></script>
+  <script src="js/app.js"></script>
+  <script src="js/router.js"></script>
+
+  <script src="js/models/subreddits.js"></script>
+  <script src="js/models/link.js"></script>
+  <script src="js/views/app.js"></script>
+
+</body>
+</html>
diff --git a/js/app.js b/js/app.js
@@ -0,0 +1,2 @@
+// Create our Application
+EmberReddit = Ember.Application.create();
diff --git a/js/libs/bootstrap.min.js b/js/libs/bootstrap.min.js
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		// Create our Application
		EmberReddit = Ember.Application.create();