StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Communicating with the server is definitely something which shouldn't be done in the view. This is something a controller is for. To separate the different parts of the application further, I would even consider implementing a <code>DataSource</code> which handles the AJAX requests. This split makes your application more testable and each components reusable. The concrete connections of view, controller and data source are then realized via bindings.</p> <p>The workflow for your case could be the following:</p> <ul> <li>The view shows your edit form, which' values are bound to a controller</li> <li>The view handles a save action which tells the controller to save the created object</li> <li>The controller delegates the saving to the DataSource which then finally starts the AJAX request</li> <li>The controller is notified when the object has been saved</li> </ul> <p>You should also look at <a href="https://github.com/emberjs/data" rel="nofollow noreferrer">ember-data</a> which is a client side data storage and handles all the boilerplate for you. Also have a look at <a href="http://jzajpt.github.com/2012/01/24/emberjs-app-architecture-data.html" rel="nofollow noreferrer">The architecture of Ember.js apps - data</a> and <a href="https://stackoverflow.com/questions/10118466/emberjs-good-separation-of-concerns-for-models-stores-controllers-views-in-a">EmberJS: Good separation of concerns for Models, Stores, Controllers, Views in a rather complex application?</a></p> <hr> <p>View:</p> <pre><code>App.View.ItemCreate = Ember.View.extend({ templateName: 'create', createObject: function(evt) { var object = this.get('content'); var controller = this.get('controller'); controller.createObject(object); } }); </code></pre> <p>Controller:</p> <pre><code>App.Controllers.List = Ember.ArrayProxy.extend({ content: [], createObject: function(hash) { var dataSource = this.get('dataSource'); dataSource.createObject(hash, this, this.createdObject); }, createdObject: function(object) { this.pushObject(object); } }); </code></pre> <p>DataSource:</p> <pre><code>App.DataSource = Ember.Object.extend({ createObject: function(hash, target, callback) { Ember.$.ajax({ success: function(data) { callback.apply(target, data); } }); } }); </code></pre> <p>Glue everything together:</p> <pre><code>App.dataSource = App.DataSource.create(); App.listController = App.Controllers.List.create({ dataSourceBinding: 'App.dataSource' }); App.View.ItemCreate.create({ controllerBinding: 'App.listController' }).append(); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload