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>
<body>
  
  <script type="text/x-handlebars" id="application">
    {{#flashMessage}}
      {{#if message.info}}
          {{message.message}}
      {{/if}}
    {{/flashMessage}}
    {{outlet}}
  </script>
  
  <script type="text/x-handlebars" id="merchants/add">
    <h1>Add Merchant</h1>
    {{input value=name}}
    <button {{action 'submit'}}>Submit</button>
  </script>
  
    
  <script type="text/x-handlebars" id="merchants">
    <h1>Merchants</h1>
      {{#each merchant in model}}
        <h3>{{merchant.name}}</h3>
        <button {{action 'delete' merchant}}>Delete</button>
      {{/each}}
      <p>{{#link-to "merchants.add"}}Add Merchant{{/link-to}}</p>
  </script>
  
  
  
  <script src="http://emberjs.com.s3.amazonaws.com/getting-started/jquery.min.js"></script>
  <script src="http://emberjs.com.s3.amazonaws.com/getting-started/handlebars.js"></script>
  <script src="http://emberjs.com.s3.amazonaws.com/getting-started/ember.js"></script>
  <script src="http://emberjs.com.s3.amazonaws.com/getting-started/ember-data.js"></script>
  <script type="text/javascript">
Ember.FlashMessageController=Ember.Controller.extend({queuedMessage:null,currentMessage:null,message:Ember.computed.alias("currentMessage"),now:function(){this.setProperties({queuedMessage:null,currentMessage:this.get("queuedMessage")});
}});Ember.Handlebars.registerHelper("flashMessage",function(c){var e=c.fn,b=c.data.keywords.controller.container,a=b.lookup("controller:flashMessage"),d=Ember.ContainerView.extend({hideAndShowMessage:function(){var g=this.get("controller.currentMessage"),f;
if(g){f=Ember.View.create({template:e});}this.set("currentView",f);}.observes("controller.currentMessage")});c.hash.controller=a;c.hashTypes=c.hashTypes||{};
Ember.Handlebars.helpers.view.call(this,d,c);});Ember.Application.initializer({name:"flashMessage",initialize:function(a,b){a.register("controller:flashMessage",Ember.FlashMessageController);
}});Ember.FlashMessageRouteMixin=Ember.Mixin.create({flashMessage:function(b){var a=this.controllerFor("flashMessage");a.set("queuedMessage",b);return a;
}});Ember.Route.reopen(Ember.FlashMessageRouteMixin,{activate:function(){this._super.apply(this,arguments);var b=this.controllerFor("flashMessage"),a=this.get("routeName");
var c=this.get("router.router.activeTransition.targetName");if(a!=="loading"&&a===c){b.now();}}});
</script>
</body>
</html>
​
 
App = Ember.Application.create();
​
App.Router.map(function () {
  this.resource('merchants', { path: '/' });
  this.resource('merchants.add',  {path:'/merchants/add'});  
});
​
App.ApplicationAdapter = DS.FixtureAdapter;
​
// Merchant Model
App.Merchant = DS.Model.extend({ 
  name: DS.attr('string')
});
​
App.Merchant.FIXTURES = [ 
  {
    id: 1,
    name: "Test Merchant 1"
  },
  {
    id: 2,
    name: "Test Merchant 2"
  },
  {
    id: 3,
    name: "Test Merchant 3"
  }
];
​
// Merchants Index
App.MerchantsRoute = Ember.Route.extend({
    model: function() {
        return this.store.find('merchant');
    },
    actions: { 
      "delete": function(merchant) {
        this.controller.removeObject(merchant);
        merchant.deleteRecord();
        merchant.save();
        this.flashMessage({message: 'Deleted', info: true}).now();
      }
    }
});
​
App.MerchantsController = Ember.ArrayController.extend({});
​
//Merchants Add
App.MerchantsAddRoute = Ember.Route.extend({
  
  model: function(params) {
    return this.store.createRecord('merchant');
  },
  
  actions: {
​
    submit: function() {
      
      var _this = this;
      var merchantRecord = this.controller.get('content');
​
      merchantRecord.save().then(function() {
        _this.flashMessage({ message: 'Success', info: true});
        _this.transitionTo('merchants');
      }, function(err) {
        _this.flashMessage({ message: 'Error', info: true});
        console.error(err);
      });
    }
  }
});
​
App.MerchantsAddController = Ember.ObjectController.extend({});
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers