我如何使用车把（EmberJS）

So when I click a button on my template it is supposed to change a value and display a list of records on the screen. This is not happening. What am I doing wrong? Below is the code for my controller, model, template and route.

因此,当我单击模板上的按钮时,应该更改一个值并在屏幕上显示记录列表。这不会发生。我究竟做错了什么?以下是我的控制器,型号,模板和路线的代码。

Controller:

import Ember from 'ember';

export default Ember.Controller.extend({

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

    actions:{

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

});

Route:

import Ember from '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 as |found|}}

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

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

{{outlet}}

Model:

import DS from 'ember-data';

export default DS.Model.extend({

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

2 个解决方案

#1

You have to use 'set' for setting ember property

你必须使用'set'来设置ember属性

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

#2

For your very simple use-case, rather that creating an action code in component.js, you can easily do this in the template.hbs if you're using Ember 2+. Here's how:

对于非常简单的用例,而不是在component.js中创建操作代码,如果您使用的是Ember 2+,则可以在template.hbs中轻松完成。这是如何做:

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

提交