ember.jsember.js-view

EmberJS :reload/refresh view after creating new record while using jquery ajax instead of ember-data


I am creating a sample todo app using the jquery to talk to rest api instead of ember-data. The code is given below. I am able to list & add Todos using this code. But once I create a new record I have to refresh the browser to see the new record. how to i make the controller to reload the model?

Here is the Route

App.TodosRoute = Ember.Route.extend({
 model: function() {
  return Ember.$.getJSON("http://localhost:3000/todos");
 }
}); 

Here is the Controller where I have the action to add new todos

App.TodosController = Ember.ArrayController.extend({
actions: {
    addTodo: function(){
        var newTodo=this.get('newTodo');
        this.set('newTodo', '');
        Ember.$.post("http://localhost:3000/todos",{todo: newTodo}));
    }
}
});

Here is the template

<script type="text/x-handlebars" data-template-name="todos">
<legend>Todos</legend>
{{input type="text" id="new-todo" value=newTodo placeholder="Todo" action="addTodo" }}

<ul>
{{#each}}
<li><a href='#'>{{todo}}</a></li>
{{/each}}
</ul>
</script>

Solution

  • add new todo in current routes model.

    App.TodosController = Ember.ArrayController.extend({
       actions: {
          addTodo: function(){
          var newTodo=this.get('newTodo');
          this.set('newTodo', '');
          self = this
          Ember.$.post("http://localhost:3000/todos",{todo:newTodo}).then(function(response)               {
             self.addObject(response);
         });
       }
     }
    });