How can I create a generic model in Ember.js like the following?
{{#each item in mythings}}
{{item}}
{{/item}}
Create a property in the controller like in this jsbin.
App.ApplicationController = Ember.Controller.extend({
mythings: ['foo', 'bar', 'baz']
});
Related
I have an outlet in application.hbs called 'sidebar'. This outlet is used in some routes to render additional info using a component called 'sidebar-info'. In those routes I use renderTemplate to render stuff in the appropriate outlets. For example:
renderTemplate: function(controller, model) {
this.render('components/sidebar-info', {
into: 'application',
outlet: 'sidebar',
model: Ember.Object.create({
title: this.get('i18n').t('signup'),
detailsComponent: 'signup-help'
})
});
this.render('sign-up');
},
This is components/sidebar-info template:
<div class="title">
<h1>{{model.title}}</h1>
</div>
{{#if model.detailsComponent}}
<div class="details">
{{component model.detailsComponent}}
</div>
{{/if}}
When the route template (not the component one) is being rendered, the model defined by the route is overwritten by the model sent to the component. If the original model was something like this:
original_model = {
field_1: 1,
field_2: 2
}
Then using model.field_1 becomes undefined in the context of the template while model.title is available.
Why is the model being overwritten?
I am using Ember 2.2.0
It seems this is the correct behaviour. According to the Route API, this is the explanation of the controller and model options sent to the render method:
controller [String|Object]
the controller to use for this template, referenced by name or as a
controller instance. Defaults to the Route's paired controller
model [Object]
the model object to set on options.controller. Defaults to the
return value of the Route's model hook
This means that setting only the model option will set the model on the Route's paired controller because that is the default option.controller. This means we need either to create a dummy controller that only works to receive the model.
I have tested this and it works as expected.
I have designed an image carousel and navbar above it with different a category. The plan is when one of the categories are clicked the images in carousel change. The category are fetched from the backend and displayed in navbar. How do I relate it to the carousel for each category?
I am using ember js(1.13.0).
application.hbs
<ul>
{{#each result in model.results}}
<li><a href="" {{action 'carousel' result}}>{{result.gallery_name}}</a></li>
{{/each}}
</ul>
controller.js
export default Ember.ObjectController.extend({
actions:{
carousel:function (result) {
console.log(result.get('gallery_name'));
}
}
});
model.js
export default DS.Model.extend({
results: DS.attr()
});
server result (json)
results:[{name:abc,url:http://google.com},{name:acd,url:google.com}.....]
You JSON is
results:[{name:abc,url:http://google.com},{name:acd,url:google.com}.....]
//your Model
export default DS.Model.extend({
results: DS.attr()
});
I donot see "gallery_name" in your json.
I donot see name / gallery_name defined in your model
In my current Ember setup, I retrieve a store for the Index Route. This works fine.
App.IndexRoute = Ember.Route.extend({
model: function(){
var store = this.store.find('index');
return store;
}
});
However, I wish to create a custom form object for the same route, and therefore following the advice of this SO answertried to return two models for the Index Route like this, however, I now get the error
Error while processing route: index that is not defined ReferenceError: that is not defined
New Code
App.IndexRoute = Ember.Route.extend({
model: function(){
return Ember.RSVP.hash({
store: this.store.find('index'),
customform: App.CustomForm.create()
});
}
});
How can I add a second model to this route?
Update
The index model had a date property that I was using to sort the items in the index model
App.IndexController = Ember.ArrayController.extend({
sortProperties: ['date'],
sortAscending: false,
I was originally displaying the index model with this in the html
{{#each item in arrangedContent}}
<li> {{some-component id=item.customid date=item.date data=item.junk}} </li>
{{/each}}
By adding the second model, whether or not i use the store to create a record, I get this error and the data from the store doesn't load in the html
Error while processing route: index undefined is not a function TypeError: undefined is not a function
Also, I don't actually need to persist the second model I'm trying to add, so I don't desire to make it a store. In the SO answer I linked to, second models were added that weren't persisted.
It looks like you should be using the store to create your new custom form record:
App.IndexRoute = Ember.Route.extend({
model: function(){
return Ember.RSVP.hash({
store: this.store.find('index'),
customform: this.store.createRecord('customForm')
});
}
});
You're going to want to create your customForm through your store:
App.IndexRoute = Ember.Route.extend({
model: function() {
return Ember.RSVP.hash({
store: this.store.find('index'),
customForm: this.store.createRecord('customForm')
});
}
});
I have App.HomeRoute, which doesn't has model, but elements on this page must have their own models.
I use render helper for render these elements, but how I must to load models for they?
I'm not sure the design is correct, but you can "load" other models using setupController method in your route.
App.YourRoute = Ember.Route.extend({
setupController: function(controller, model) {
this._super(controller, model);
// set other properties
var a = this.store.find("modelA");
controller.set("a", modelA);
var b = this.store.find("modelB");
controller.set("b", modelA);
}
});
Now in your template just use them
{{each a}}
<div>{{id}}</div>
etc...
{{/each}}
I have a nested route structure like this:
App.Router.map(function() {
this.resource('user', {path: '/user/:user_id'}, function() {
this.route('followers', {path: '/followers'});
});
});
when I hit the user/123/followers route I would expect that it automatically fetch the model from user/123/followers, but it just fetches the user model from user/123 again. What do I need to add so it fetches the right data for the route?
Each route have your own model, and this isn't propaged, by default.
So App.UserRoute model, returns the current model like expected:
App.User.find(params.user_id)
But because App.UserFollowersRoute have your own model hook, then you have to provided it.
You can do this easily using the modelFor.
App.UserFollowersRoute = Ember.Route.extend({
model: function() {
return this.modelFor('user');
}
});
The modelFor look for a model from a named route. So modelFor('user'), will retrieve the model from App.UserRoute.
And in your user/followers template, you will have the current user, in the current context:
<script type="text/x-handlebars" data-template-name="user/followers">
<h2>{{name}} followers:</h2>
<ul>
{{#each followers}}
<li>{{name}}</li>
{{/each}}
</ul>
</script>
Here a sample with this working
Ember will automatically call User.find(123) when you hit /user/123/... because that is the default model hook for App.UserRoute. If you want to fetch additional data when the followers route is accessed, define a model hook for App.UserFollowersRoute:
App.UserFollowersRoute = Ember.Route.extend({
model: function() {
user = this.controllerFor('user');
// Now find and return the list of followers
}
});