Reputation: 5375
There is this post: "What's the right way of doing manual form data saving with Ember.js?", however, I am at a loss as to how to do this with Ember 2.3.
In the accepted answer to that question, we have this snippet:
App.IndexController = Ember.ObjectController.extend({
proxy: {},
setUnknownProperty: function(key, value) {
console.log("Set the unknown property: " + key + " to: " + value);
this.proxy[key] = value;
console.log(this.proxy);
},
flush: function() {
for(var key in this.proxy)
this.set('model.'+key, this.proxy[key]);
}
});
however, I do not have an "ObjectController" in my project. Running
ember generate controller test
gives me something that reads Ember.Controller.extend({ ... });
, and not an ObjectController. Searching the 2.3 API, I cannot find ObjectController at all.
Inserting the snippet into the Ember.Controller.extend, where my various action methods are placed seems to not do the trick. The entire model disappears (no data), and adding data does not work either. Nothing happens, no errors, nothing. The methods are probably just not being called at all.
Any advice on "converting" this to 2.3 would be appreciated.
Right now I have
export default Ember.Controller.extend({
proxy: {},
actions: {
setUnknownProperty: function(key, value) {
console.log("Set the unknown property: " + key + " to: " + value);
this.proxy[key] = value;
console.log("Proxy: ");
console.log(this.proxy);
},
testAction: function() {
console.log("fired");
}, flush: function() {
console.log("Flush called");
for(var key in this.proxy) {
console.log("Flushing " + key);
this.set('model.'+key, this.proxy[key]);
console.log("Saving");
this.get('model.'+key).save();
}
}
}
Upvotes: 0
Views: 455
Reputation:
To answer this question I created a quick example app that can be viewed here:
https://github.com/tyronepost/EmberFormExample
I created a route index route and a user model using the following commands:
ember g route index -p // -p short for --pod, groups .js and .hbs file into the same dir
ember g model user
index/template.hbs:
<div>first name: {{input value=firstName}}</div>
<div>last name: {{input value=lastName}}</div>
<div>email: {{input value =email}}</div>
<button {{action 'submit'}}>submit</button>
index/route.js:
import Ember from 'ember';
export default Ember.Route.extend({
actions: {
submit: function() {
var user = this.store.createRecord('user', {
firstName: this.controller.get('firstName'),
lastName: this.controller.get('lastName'),
email: this.controller.get('email')
});
user.save().then( () => {
console.log('save successful');
this.controller.set('firstName', null);
this.controller.set('lastName', null);
this.controller.set('email', null);
}, function() {
console.log('save failed');
});
}
}
});
user.js:
import DS from 'ember-data';
export default DS.Model.extend({
firstName: DS.attr('string'),
lastName: DS.attr('string'),
email: DS.attr('string')
});
I also created a rest adapter and specified the namespace as 'api':
ember g adapter application
application.js
import DS from 'ember-data';
export default DS.RESTAdapter.extend({
namespace: 'api'
});
And an http-mock object that boots up when 'ember server' is called
ember g http-mock users
The important thing to note here is we are using the default controller that the route maps to, so there's no need to create one explicitly. In this instance, all we are using it for is maintaining state of the input field until we click submit.
Within our submit function, we call user.save().then(...), which takes as parameters a success callback and a failure callback. One one executes depends on how the server responds.
The following book is a really good source of information on how to deal with the nuances of ember 2.x
https://pragprog.com/book/mwjsember/deliver-audacious-web-apps-with-ember-2
Upvotes: 1