javascript - How do I work with handlebars (EmberJS) -

so when click button on template supposed change value , display list of records on screen. not happening. doing wrong? below code controller, model, template , route.

controller:

import ember 'ember';  export default ember.controller.extend({      usernamein: '',     passwordin: '',     found: '',      display: false,      actions:{          rendernotes(){             this.display = true;         }     }  }); 

route:

import ember 'ember';  export default ember.route.extend({  model() {     return this.store.findall('note'); }  }); 

template:

<h1>login:</h1>  <h3>username:</h3>{{input type="text" value = keyinput size="50"}} <h3>password:</h3>{{input type="text" value = keyinput size="50"}} <br> <br> <button{{action 'rendernotes'}}>submit</button>  {{#if display}}     <thead>       <tr>           <th>username</th>           <th>note</th>       </tr>     </thead>     <tbody>     {{#each model |found|}}          <tr>             <th>{{found.username}}</th>             <td>{{found.note}}</td>         </tr>      {{/each}}     </tbody> {{/if}}  {{outlet}} 

model:

import ds 'ember-data';  export default ds.model.extend({      note: ds.attr('string'),     username: ds.attr('string'),     password: ds.attr('string') }); 

you have use 'set' setting ember property

rendernotes(){   this.set('display', true); }