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>
​
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
​
<meta charset="utf-8">
<title>Ember Starter Kit</title>
  <link rel="stylesheet" href="https://rawgithub.com/emberjs/starter-kit/v1.0.0/css/normalize.css">
  <link rel="stylesheet" href="https://rawgithub.com/emberjs/starter-kit/v1.0.0/css/normalize.css">
</head>
<body>
    <script type="text/x-handlebars">
    <h2> Welcome to Ember.js</h2>
​
    {{outlet}}
    </script>
  
  <script type="text/x-handlebars" data-template-name="index">
​
    <h3>Filter</h3>
      {{#form-for controller}}
      {{input country as="select"
          value="selectedCountry"
          collection="countries"
          optionValuePath="content.name"
          optionLabelPath="content.name"
          prompt="Select Country"
      }}
​
    {{/form-for}}
      {{#form-for controller}}
      {{input number as="select"
          value="selectedNumber"
          collection="numbers"
          optionValuePath="content.name"
          optionLabelPath="content.name"
          prompt="Select Number"
      }}
      {{/form-for}}    
    <button {{action 'resetForm'}}>
      Reset form
    </button> 
    <table>
    {{#each item in filtered}}
      <tr>
        <td>{{item.name}}</td>
        <td>{{item.nr}}</td>
      </tr>
    {{/each}}
    </table>
​
​
​
  </script>
​
​
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
  <script src="http://builds.emberjs.com/tags/v1.5.0/ember.js"></script>
  <script src="http://rawgithub.com/ember-addons/bootstrap-for-ember/master/dist/js/bs-core.max.js"></script>
  <script src="http://rawgithub.com/ember-addons/bootstrap-for-ember/master/dist/js/bs-modal.max.js"></script>
  <script src="http://rawgithub.com/ember-addons/bootstrap-for-ember/master/dist/js/bs-button.max.js"></script>
  <script src="http://builds.dockyard.com.s3.amazonaws.com/ember-easyForm/stable/ember-easyForm.js"></script>
  <script src="http://builds.dockyard.com.s3.amazonaws.com/ember-validations/ember-validations-latest.js"></script>
  
</body>
</html>
 
/* Put your CSS here */
html, body {
    margin: 20px;
}
​
td{padding:5px }
 
App = Ember.Application.create();
​
​
​
App.IndexController = Ember.Controller.extend(Ember.Validations.Mixin, {
  selectedCountry: null,
  selectedNumber: null,
  actions: {
    submit: function() {
      alert('Saved!');
      console.log(this.name);
      console.log(this.country_list);
    },
    resetForm:function(){
      console.log('try to reset form');
      this.set('selectedCountry',null);
      this.set('selectedNumber',null);
    }    
  },
​
  countries : [
    {id:'1',name:'Sierre Leone'},
    {id:'2',name:'Japan'}
​
  ],
    numbers : [
    {id:'1',name:'234'},
    {id:'2',name:'674'}
​
  ],
    list : [
    {id:'1',name:'Sierre Leone',nr:'234'},
    {id:'2',name:'Japan',nr:'674'},
    {id:'3',name:'Sierre Leone',nr:'934'},
    {id:'4',name:'Japan',nr:'243'}
  ],
  
  filtered: (function() {
    var temp = this.get('list');
    if (this.get('selectedCountry') !== null) 
      temp = temp.filterProperty('name', this.get('selectedCountry'));
    if (this.get('selectedNumber') !== null) 
      temp = temp.filterProperty('nr', this.get('selectedNumber'));
    
    return temp;
  }).property('selectedCountry','selectedNumber')
});
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers