CODEWITHSUNDEEP
ember.jsember-dataember-cli
OllieT
OllieT

Reputation: 41

Get specific item in model

I've created a new ember project and connected it to firebase. I'm retrieving all posts fine, and displaying all posts fine, but I want to display just a single post.

I'm using ember v1.13.11

Model - app/models/post.js :

import Ember from 'ember';
import DS from 'ember-data';

let {
  Model,
  attr
} = DS;

export default Model.extend({
  title: attr('string'),
  createdDate: attr('date'),
  text: attr('string'),
  imgURL: attr('string')
});

Route - app/routes/index.js:

import Ember from 'ember';

export default Ember.Route.extend({
	model(){
		return this.store.findAll('post');
	}
});

template - app/templates/index.hbs:

{{#each model as |post|}}
<div class="panel panel-default">
	<div class="panel-heading">
		{{post.title}}
	</div>
	<div class="panel-body">
	<p>{{post.text}}</p>
	<br />
	<img src="{{post.imgURL}}">
	</div>
</div>
{{/each}}

This all works fine. However I was to display a specific post. I thought this would work, but I was wrong.

<div class="panel panel-default">
    	<div class="panel-heading">
    		{{post.1.title}}
    	</div>
    	<div class="panel-body">
    	<p>{{post.1.text}}</p>
    	<br />
    	<img src="{{post.1.imgURL}}">
    	</div>
    </div>

// OR

<div class="panel panel-default">
    	<div class="panel-heading">
    		{{post.[1].title}}
    	</div>
    	<div class="panel-body">
    	<p>{{post.[1].text}}</p>
    	<br />
    	<img src="{{post.[1].imgURL}}">
    	</div>
    </div>

Any ideas?

Upvotes: 2

Views: 405

Answers (2)

jstuartmilne
jstuartmilne

Reputation: 4508

you got many options here is one doing it in the route

model() {
  return this.store.findAll('post');
},

setupController(controller, model) {
  controller.set('post', model.get('firstObject'));
}

That wil prepare the controller with just one post

another option is in the controller create a computed atribute

import Ember from 'ember';

export default BaseController.extend({
  onePost: Ember.computed('posts',function(){
    return this.get('posts.firstObject');
  })
}

and in your handlbars template reference that onePost

{{onePost.title}}

I think i like this option better

@OllieT Sorry i thought you had fixed it already, the computed goes in your component, you can put computed attributes in the model too but this is not what you want right now. So just add the computed property to where you recieve your model component or controller and then you should be able to make it appear. Your 'model' is what goes in the return this.get('putYourModelHere') to clearit out a bit you can do return this.get('putYourModelHere').get('firstObject') which is the same as return this.get('putYourModelHere.firstObject') or even put {{posts.firstObject}} in your old template and you ar good to go

Upvotes: 1

Andrew
Andrew

Reputation: 1013

You can actually use the firstObject method in a template.

So if you have a controller whose model is a bunch of posts and you want to display the title of the first of those posts, in the template for that controller you could write:

{{model.firstObject.title}}

Usually though if you are in route like /posts and you want to see the data for a post with id 1 you would transition to the route /posts/1 and in the route set the model for that route as the post with the id from the url's id parameter ie in the posts.show route something like

model: function (params) {
 return this.get('store').find('post', params.id)
}

and then in the template you now just reference

{{model.title}}

Upvotes: 0

Related Questions