Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/style.css">
  <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
</head>
<body>
  
  <script type="text/x-handlebars">
    <div class="navbar">
      <div class="navbar-inner">
        <a class="brand" href="#">Bloggr</a>
        <ul class="nav">
          <li>{{#link-to 'posts'}}Posts{{/link-to}}</li>
          <li>{{#link-to 'about'}}About{{/link-to}}</li>
        </ul>
      </div>
    </div>
​
    {{outlet}}
  </script>
​
  <script type="text/x-handlebars" id="posts">
    <div class="container-fluid">
      <div class="row-fluid">
        <div class="span3">
          <table class='table'>
            <thead>
              <tr><th>{{#link-to 'posts.new'}}New Post{{/link-to}}</th></tr>
              <tr><th>Recent Posts</th></tr>
            </thead>
            {{#each model}}
            <tr><td>
                {{#link-to 'post' this}}{{title}} <small class='muted'>by {{author}}</small>{{/link-to}}
            </td></tr>
            {{/each}}
          </table>
        </div>
        <div class="span9">
          {{outlet}}
        </div>
      </div>
    </div>
  </script>
​
  <script type="text/x-handlebars" id="posts/index">
    <p class="text-warning">Please select a post</p>
  </script>
​
  <script type="text/x-handlebars" id="post">
    {{#if isEditing}}
      {{partial 'post/edit'}}
    {{else}}
      <button class="btn btn-default"  {{action 'edit'}}>Edit</button>
    {{/if}}
​
    <h1>{{title}}</h1>
    <h2>by {{author}} <small class='muted'>({{format-date date}})</small></h2>
​
    <hr>
​
    <div class='intro'>
      {{format-markdown excerpt}}
    </div>
​
    <div class='below-the-fold'>
      {{format-markdown body}}
    </div>
  </script>
  
  <script type="text/x-handlebars" id="posts/new">
    <h2>Create a New Post</h2>
    {{partial 'post/edit'}}
  </script>
​
  <script type="text/x-handlebars" id="post/_edit">
    <p>{{input type="text" value=title placeholder="Title"}}</p>
    <p>{{input type="text" value=author  placeholder="Author"}}</p>
    <p>{{input type="text" value=excerpt  placeholder="Excerpt"}}</p>
    <p>{{input type="text" value=date  placeholder="date"}}</p>
    <p>{{textarea value=body  placeholder="Body"}}</p>
    <button class="btn btn-default"  {{action 'doneEditing'}}>Done</button>    
  </script>
​
  <script type="text/x-handlebars" id="about">
    <div class='about'>
     about page
    </div>
  </script>
​
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.2/handlebars.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.1.2/ember.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.1.0/moment.min.js"></script>
  <script src="http://builds.emberjs.com/beta/ember-data.js"></script>
​
</body>
</html>
​
 
​
 
App = Ember.Application.create({});
​
​
App.ApplicationAdapter = DS.LSAdapter.extend({
    namespace: 'bloggr-emberjs'
});
App.ApplicationAdapter = DS.LSAdapter;
​
​
​
App.Router.map(function() {
  this.resource('about');
  this.resource('posts', function() {
    this.route('new');
    this.resource('post', { path: ':post_id' });
  });
});
​
App.PostsNewRoute = Ember.Route.extend({
  model: function() {
    return this.get('store').createRecord('post');
  },
  actions: {
    doneEditing: function() { 
      this.modelFor('postsNew').save();
      this.transitionTo('posts.index');
    }
  }
});
​
App.Post = DS.Model.extend({
  title: DS.attr('string'),
  author: DS.attr('string'),
  date: DS.attr('date', { defaultValue: new Date() }),  
  excerpt: DS.attr('string'),
  body: DS.attr('string')
});
​
App.PostsRoute = Ember.Route.extend({
  model: function() {    
    return this.get('store').find('post');
  },
  actions: {
    doneEditing: function() {  
         
      this.controllerFor('post').send('finishedEditing');    
      //error's here
      this.get('store').save();      
    } 
  }
});
​
App.PostRoute = Ember.Route.extend({
  model: function(params) {
    return this.get('store').find('post', params.post_id);
  }
});
​
App.PostController = Ember.ObjectController.extend({
  isEditing: false,
  edit: function() {
    this.set('isEditing', true);
  },
  finishedEditing: function() {
    this.set('isEditing', false);          
  }
});
​
var showdown = new Showdown.converter();
​
Ember.Handlebars.helper('format-markdown', function(input) {
  return new Handlebars.SafeString(showdown.makeHtml(input));
});
​
Ember.Handlebars.helper('format-date', function(date) {
  if (date) {
    return moment(date).fromNow();
  }
});
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers