ハンドルバー（EmberJS）の操作方法

Question

テンプレート上のボタンをクリックすると、値を変更して画面上にレコードのリストを表示することになっています。これは起こっていない。私は間違って何をしていますか？以下は私のコントローラ、モデル、テンプレート、ルートのコードです。

コントローラー：

import Ember from 'ember'; 

export default Ember.Controller.extend({ 

    usernameIn: '', 
    passwordIn: '', 
    found: '', 
    display: false, 

    actions:{ 

     renderNotes(){ 
      this.display = true; 
     } 
    } 

}); 

ルート：

import Ember from 'ember'; 

export default Ember.Route.extend({ 

model() 
{ 
    return this.store.findAll('note'); 
} 

}); 

テンプレート：

<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 as |found|}} 

     <tr> 
      <th>{{found.username}}</th> 
      <td>{{found.note}}</td> 
     </tr> 

    {{/each}} 
    </tbody> 
{{/if}} 

{{outlet}} 

モデル：

import DS from 'ember-data'; 

export default DS.Model.extend({ 

    note: DS.attr('string'), 
    username: DS.attr('string'), 
    password: DS.attr('string') 
}); 

Answer 1

はあなたの非常に単純なユースケースについて燃えさしプロパティ

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

Answer 2

を設定し、むしろそのcomponent.jsでのアクションコードを作成するための「セット」を使用する必要があり、あなたは簡単にテンプレートでこれを行うことができます。 Ember 2+を使用している場合は、hbs

<button onclick={{action (mut display) true)}}>Submit</button>