Ember.js change model on click?

Question

JavaScript

There are 3 blocks on the page with a number (score) and a like button. When you click on the button, the number should increase by 1 and of course change on the page. It is not possible to implement all this.
HTML:

<script type="text/x-handlebars" data-template-name="index">
                        <h1>{{headerName}}</h1>
                        <div class="row">
                                {{#each item in model}}
                                        <div class="col-sm-4">
                                                <div class="thumbnail">
                                                        <img {{bind-attr src=item.img}}>
                                                        <div class="caption">
                                                                <h3 class="text-center">{{item.name}}</h3>
                                                                <p class="text-info text-center">{{item.kitchen}}</p>
                                                                <p>{{item.text}}</p>
                                                                <a target="_blank" {{bind-attr href=item.link}}>Link</a>
                                                                <hr />
                                                                <p class="text-center h1">{{item.score}}</p>
                                                                <hr />
                                                                <button type="button" {{action like item}} class="btn btn-danger btn-lg btn-block"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></button>
                                                        </div>
                                                </div>
                                        </div>
                                {{/each}}
                        </div>
                        {{outlet}}
                </script>

JS:

App = Ember.Application.create();

App.Router.map( function() {
    	this.resource( 'index', { path: '/' } );
});

App.IndexRoute = Ember.Route.extend({
  // setupController: function(controller) {
  // 	controller.set('title', 'My App');
  // 	controller.set('items', items);
  // },
  model: function() {
    return App.Item.all();
  }
});

App.Item = Ember.Object.extend();

App.IndexController = Ember.ObjectController.extend({
  headerName: 'FreitagFutter',
  appVersion:  2.1,

  actions: {
    like: function(item) {
      console.log(item);
                        item.set('score', 1);
    }
  }
});

App.Item.reopenClass({
  all: function() {
    return $.getJSON("http://domain.com/data.php").then(function(response) {
     	return response;
    });
  }
});

In the line "item.set('score', 1);" in JS gives an error: Uncaught TypeError: item.set is not a function.
Maybe I'm doing everything wrong, give direction to the newbie :) Thank you!

Answer 1

index in App.Router is there by default, it does not need to be specified.
You have an error here:

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return App.Item.all();
  }
});

App.Item.reopenClass({
  all: function() {
    return $.getJSON("http://domain.com/data.php").then(function(response) {
     	return response;
    });
  }
});

You get an array of objects, they are not App.Item but standard js objects.
You can use incrementProperty to increase the value .
Head-on solution:

App.Item.reopenClass({
  all: function() {
    return $.getJSON("http://domain.com/data.php").then(function(response) {
     	return response.forEach(function(item){
     	     	return App.Item.create(item);
     	});
    });
  }
});

Why don't you work through standard models and REST API?