How to update an element in Ember

I have a page with data shown in rows. Each row has an element: Stop or Play. This element is driven by the following code in handlebars:

  <a ><span class="glyphicon glyphicon-play" aria-hidden="true"></span></a>

  <a ><span class="glyphicon glyphicon-stop" aria-hidden="true"></span></a>

When user clicks "Stop" or "Play" icon, I would like the logic to make a call to the backend server, update the database, and change the icon to either stop or play. I am not sure how to do this in Ember. At the moment, this is how my toggle method looks like:

App.TestController = Ember.ObjectController.extend({
    toggle: function () {
        return "/my/backendserver/"+this.get('id')+"/toggle";
    }.property()
});

This works, however, it does a full page reload.

Question

How can I modify the toggle method so that it only calls the server (providing id as parameter, and switches the stop icon to play or vice and versa without doing a complete page reload?)