Ember.js изменить model по клику?

Question

[Konstantin Smetana]

На странице 3 блока с числом (score) и кнопкой like. При клике на кнопку число должно увеличиваться на 1 и конечно изменятся на станице. Не получается все это реализовать.

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;
		});
	}
});

В строке " item.set('score', 1);" в JS выдает ошибку: Uncaught TypeError: item.set is not a function.

Может я вообще все делаю неправильно, дайте направление новичку :) Спасибо!

Answer 1

[Станислав Романов]

index в App.Router по умолчанию есть, его не нужно указывать.

У вас в этом месте ошибка:

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;
    });
  }
});

Вы получаете массив объектов, они не App.Item, а стандартные объекты js.

Чтобы увеличить значение можно использовать incrementProperty.

Решение в лоб:

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);
     	});
    });
  }
});

Почему вы не работает через стандартные модели и REST API?

Comments

[Konstantin Smetana]

Как буде выглядеть стандартная модель?

[Станислав Романов]

App = Ember.Application.create();

	App.Item = DS.Model.extend({
		score: DS.attr('number')
	});
	
	App.IndexRoute = Ember.Route.extend({
	  model: function() {
	    //Ожидайте GET /items
		return this.store.find('item');
	  }
	});

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

	  actions: {
		like: function(item) {
			item.incrementProperty('score');
			
			//Надо же наверное сохранить?
			item.save().catch(function(){
				item.rollback();
			});
		}
	  }
	});