javascript - 将新日期推送到 ember javascript 数组

标签 javascript ember.js

我正在使用 javascript 对象数组创建一个基本的 ember 应用程序(在我牢牢掌握之前不想使用其他任何东西)。我遇到麻烦了 实现添加新用户的功能。我不确定要添加到我的 Controller 中的内容。

在模板中:

<form {{action 'add-student' on="submit"}}> 
{{input id="add-student" type="text" placeholder="student name"  value=name}}
<button class="btn btn-default" type="submit">Add</button>
</form>

我的学生路线: 从 'ember' 导入 Ember;

 var students = [{
  id: 1,
  name: 'John',

}, {
  id: 2,
  name: 'Vanessa'     
}];

export default Ember.Route.extend({
  model() {
    return students;
  }
});

最佳答案

对于路线,您可能需要这样的东西。使用 Ember.RSVP.hash 它允许您从模型返回 1-n 属性。

export default Ember.Route.extend({
  model() {
    const store = this.get('store');
    return Ember.RSVP.hash({
        students: Ember.A([
          store.createRecord('student', { name: 'Vanessa'})
        ]),
        someOtherModelThing: store.find('xx') 
    })
  }
});

在模板中你会想要这样的东西。

{{input type="text" value=name}}

<button class="btn btn-default" {{action "addNewStudent" name}}>Add</button>

要处理 addNewStudent,您需要在 Controller 中编写一个操作。

...

    actions: {
       addNewStudent(studentName) {
          const store = this.get('store');
          var newStudent = store.createRecord('student', {name: studentName});
          this.get('model.students').pushObject(newStudent);
       }
    }

...

如果您还想保存它们,您可能需要带有“saveStudents”操作的保存按钮。

saveStudents: function() {
   return Ember.RSVP.all(this.get('model.students').invoke('save'))
}

显示模板中的学生列表。

{{#each model.students as |student|}}
    <p> {{student.name}}
{{/each}}

所有这些都可以在不使用 ember-data (store.createRecord 等)的情况下实现。使用纯 JSON 和 Ajax 来保存数据。

关于javascript - 将新日期推送到 ember javascript 数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37536920/

相关文章:

javascript - 在 Ember 中,如何在多个地方使用的组件中拥有不同的 html?

javascript - 在 ember.js 中从数组中删除记录的正确方法

javascript - 导入模块的最佳实践是什么?

javascript - Backbone.js 事件未触发

javascript - 在不支持的 api 调用上抛出错误

ember.js - 在 ember-cli 应用程序中哪里添加 css 和 js 文件?

javascript - Ember.js/Handlebars.js 将条件类属性绑定(bind)到 {{#link-to}} 助手

Ember.js:如何从 Ember.Map 查看数据

javascript - 在 zingChart.render() 之后调用回调函数

javascript - css 属性全为空 javascript