Javascript 如何使用车把（EmberJS）

因此，当我单击模板上的一个按钮时，它应该更改一个值，并在屏幕上显示一个记录列表。这并没有发生。我做错了什么？下面是我的控制器、型号、模板和路线的代码

控制器：

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

---

必须使用“set”设置余烬属性

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

---

对于您非常简单的用例，而不是在component.js中创建操作代码，如果您使用的是Ember 2+，那么您可以在template.hbs中轻松完成这项工作。以下是方法：

---

Submit

如何使此按钮切换显示？。这在没有写操作的情况下是可能的吗？。我问这个只是为了证实是的，不写动作是可能的。只需将

action

助手与

mut

助手组合起来，就像我上面所示的那样。您可以阅读有关

mut

帮助程序和

操作

帮助程序的更多信息。在您的代码中，true是硬编码的。我没有找到实现切换显示属性的方法。也许我应该在新问题中问这个问题！啊。我现在明白你的问题了。您可以像这样使用内联

条件帮助程序：
Submit
renderNotes(){
  this.set('display', true);
}