StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POWhat is the right approach to reload the model for a non-dynamic route with ember.js?
text
Body
copied!<p>I'm having a simple array of models which I display in a list (path: /things). The models get loaded from a REST-API. </p> <p>In a nested route I have the functionality to add a new model. (path: /things/add). The new model is persisted over a REST-API.</p> <p>After adding the new model, I do a <code>transitionTo('things')</code> to get back to the list.</p> <p>Following the ember documentation, by using "transitionTo" neither the <code>model</code> hook nor the <code>setupController</code>-Hook are called for non dynamic routes. </p> <p><strong>What is the right approach to refresh the model on a non-dynamic route, when using <code>transitionTo</code>? Or: what is the best way to reload a model on a non-dynamic route without using <code>transitionTo</code>?</strong></p> <h3>app.js</h3> <pre><code>// App Init App = Ember.Application.create(); // Routes App.Router.map(function() { this.resource('things', function() { this.route('add'); }) }); App.IndexRoute = Ember.Route.extend({ redirect : function() { this.transitionTo('things'); } }); App.ThingsRoute = Ember.Route.extend({ model : function(param) { return App.Thing.findAll(); }, }); App.ThingsAddRoute = Em.Route.extend({ setupController : function(controller) { controller.set('content', App.Thing.create()); } }); // Models App.Thing = Ember.Object.extend({ name : null, description : null }); App.Thing.reopenClass({ findAll : function() { var result; $.ajax({ url : 'http://path/app_dev.php/api/things', dataType : 'json', async : false, success : function(data) { result = data.things; } }); return result; }, save : function(content) { console.log(content); $.ajax({ type : 'post', url : 'http://path/app_dev.php/api/things', data : { name : content.name, description : content.description }, async : false }); } }); // Controller App.ThingsAddController = Em.ObjectController.extend({ add : function() { App.Thing.save(this.content); this.transitionToRoute('things'); }, cancelAdding : function() { this.transitionToRoute('things'); } }); </code></pre> <h3>index.html</h3> <pre><code><script type="text/x-handlebars"> <div class="container"> <div class="row"> <div class="span12"> <h1>List of things</h1> </div> {{outlet}} </div> </div> </script> <script type="text/x-handlebars" data-template-name="things/add"> <div class="span12"> <form class="form-horizontal"> <fieldset> <div id="legend"> <legend class="">Add new thing</legend> </div>  <div class="control-group"> <label class="control-label" for="name">Name</label> <div class="controls"> {{view Ember.TextField id="name" placeholder="Enter Name" valueBinding="name"}} </div> </div>  <div class="control-group"> <label class="control-label" for="description">Description</label> <div class="controls"> {{view Ember.TextArea id="description" placeholder="Enter description" valueBinding="description"}} </div> </div>  <div class="control-group"> <div class="controls"> <button class="btn btn-success" {{action add}}>Save</button> <button class="btn" {{action cancelAdding}}>Cancel</button> </div> </div> </fieldset> </form> </div> </script> <script type="text/x-handlebars" data-template-name="things"> <div class="span12"> <div class="btn-toolbar"> <div class="btn-group"> {{#linkTo things.add}}<i class="icon-plus"></i> add new thing{{/linkTo}} </div> </div> </div> {{outlet}} <div class="span12"> <table cellpadding="0" cellspacing="0" border="0" class="table table-striped "> <thead> <tr> <th>ID</th> <th>Name</th> <th>Description</th> </tr> </thead> <tbody> {{#each item in model}} <tr> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.description}}</td> </tr> {{/each}} </tbody> </table> </div> </script> </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