I've built a RESTAdapter to work with couchdb, and am testing it to make sure it works, and so far things seem fine, but my test route seems to be having other problems.
Sorry this is so long, I probably ought to set up a fiddle for it... I've just never done that before, but will look into it right now....
I've built the following (relevant) things:
App.Thing = DS.Model.extend({
rev: DS.attr(),
price: DS.attr()
});
App.Things<Index>Route = Ember.Route.extend({
model: function () {
return this.get('store').findAll('thing');
}
});
(I've tried ThingsRoute with and without the Index without any change)
In App.Router.map:
this.resource('things', function() {
this.route('thing', { path: ':thing_id'})
});
In App.ApplicationAdapter = DS.RESTAdapter.extend:
buildURL: function(type, id) {
id = id || '_all_docs?include_docs=true';
return this._super(type, id);
}
In App.ApplicationSerializer = DS.RESTSerializer.extend:
extractArray: function(store, type, payload, id, requestType) {
root = type.typeKey;
root = Ember.String.pluralize(root);
newJSON = {};
newJSON[root] = payload.rows.map(function(row) {
return row.doc;
});
payload = newJSON;
console.log(payload);
return this._super(store, type, payload, id, requestType);
},
normalize: function(type, hash, property) {
var json = { id: hash._id, rev: hash._rev};
delete hash._id;
delete hash._rev;
for (var prop in hash) {
json[prop] = hash[prop];
}
console.log(json);
return this._super(type, json, property);
}
And this template:
<script type="text/x-handlebars" data-template-name="things/index">
{{#each thing in things}}
{{thing.rev}}
{{thing.price}}
{{else}}
Empty.
{{/each}}
</script>
The console.logs in extractArray and normalize both show the following perfectly formatted and correct json:
Object {things: Array[3]}
Object {id: "8117701d38cf9a1112ce8ed38000064d", rev: "1-14918623fedb103cf035ff2489e0a6a1", price: 1}
Object {id: "8117701d38cf9a1112ce8ed3800006e5", rev: "1-09b1e6aa1fb391e11c90bca86daccb7a", price: 5}
Object {id: "8117701d38cf9a1112ce8ed38000144e", rev: "1-2a682bf7ce58829ad2054bb8f5fbe869", price: 4}
but when the template is rendered it simply shows Empty, and when I replace the model hook in the ThingsRoute to this:
return {things: [{id: 1, rev: 234, price: 4}, {id: 2, rev: 235, price: 3}]};
it works exactly as expected. AND when I define afterModel:
afterModel: function(things, transition) {
console.log(things);
console.log(transition);
}
It logs this:
Class {type: function, store: Class, isLoaded: true, isUpdating: false, toString: function…}
Transition {router: Router, promise: Promise, data: Object, resolvedModels: Object, providedModels: Object…}
that Class object has this:
content: Array[3]
0: Class
1: Class
2: Class
and each of THOSE Classes has an id field corresponding to my objects.
What's happening? Why isn't my route getting that model even after the Adapter seems to do it's job perfectly?
I think that your problem is because the things variable in your template, doesn't exist, try to update to model
<script type="text/x-handlebars" data-template-name="things/index">
{{#each thing in model}}
{{thing.rev}}
{{thing.price}}
{{else}}
Empty.
{{/each}}
</script>
Or if you want that variable you can create a alias in your controller:
App.ThingsIndexController = Ember.ArrayController.extend({
things: Ember.computed.alias('model')
});
You should be using find instead of findAll
Related
So, I'm trying to access my model properties in controller.
Controller:
dashobards: [
{ id: 12, name: 'test' },
{ id: 17, name: 'test2' },
];
In route I have model named dashboards
return Ember.RSVP.hash({
dashboards: this.store.findAll('dashboard'),
}).then((hash) => {
return Ember.RSVP.hash({
dashboards: hash.dashboards
});
}, self);
I wanna have result in controller like this:
dashboards: [
{ id: 12, name: 'test' },
{ id: 17, name: 'test2' },
{ id: 17, name: 'test1' },
{ id: 20, name: 'test20' },
];
In controller I am trying to access this model like this:
this.dashborads = this.get(model.dashobards)
And it's not working, is there any other way of doing that?
Another update How to access complex object which we get it from server in ember data model attibute,
Created twiddle to demonstrate
define attribute with DS.attr(),
export default Model.extend({
permissions:DS.attr()
});
route file,
model(){
return this.store.findAll('dashboard');
}
Your server response should be like,
data: [{
type: 'dashboard',
id: 1,
attributes: {
permissions: {'name':'role1','desc':'description'}
}
}]
hbs file,
{{#each model as |row| }}
Name: {{row.permissions.name}} <br/>
Desc: {{row.permissions.desc}} <br />
{{/each}}
Update:
Still I am not sure about the requirement, Your twiddle should be minimalized working twiddle for better understanding..anyway I will provide my observation,
1.
model(params) {
this.set('id', params.userID);
const self = this;
return Ember.RSVP.hash({
dashboards: this.store.findAll('dashboard'),
user: this.store.findRecord('user', params.userID)
}).then((hash) => {
return Ember.RSVP.hash({
user: hash.user,
dashboards: hash.dashboards
});
}, self);
}
The above code can be simply written like
model(params) {
this.set('id', params.userID);
return Ember.RSVP.hash({
dashboards: this.store.findAll('dashboard'),
user: this.store.findRecord('user', params.userID)
});
}
Its good to always initialize array properties inside init method. refer https://guides.emberjs.com/v2.13.0/object-model/classes-and-instances/
For removing entry from array,
this.dashboard.pushObject({ 'identifier': '', 'role': '' }); try this this.get('dashboard').pushObject({ 'identifier': '', 'role': '' });.
if possible instead of plain object you can use Ember.Object like
this.get('dashboard').pushObject(Ember.Object.create({ 'identifier': '', 'role': '' }));
For removing entry.
removeDashboard(i) {
let dashboard = Ember.get(this, 'dashboard');
Ember.set(this, 'dashboard', dashboard.removeObject(dashboard[i]));
}
The above code can be written like, since i is an index
removeDashboard(i) {
this.get('dashboard').removeAt(i)
}
Just do return this.store.findAll('dashboard'); in route model hook, and dont override setupController hook, then in hbs you should be able to access model that will represent RecordArray. you can have a look at this answer for how to work with this.
I am creating universal grid for some entities. For that I added this in routes:
this.route('record', { path: '/record' },function() {
this.route('index', {path: '/:entity'});
this.route('view', {path: '/:entity/:record_id'});
});
and created new "index" route:
export default Ember.Route.extend({
entity: '',
queryParams: {
sort: {
refreshModel: true
}
},
beforeModel: function(transition) {
var entity = transition.params[this.get('routeName')].entity;
this.set('entity', entity);
},
model: function(params) {
delete params.entity;
return this.store.findQuery(this.get('entity'), params);
},
}
my controller
export default Ember.ArrayController.extend({
queryParams: ['sort'],
sort: ''
}
how can I set default value for the "sort" based on dynamic segment?
For example in my settings I store sort values for all entites:
'settings.user.sort': 'email ASC',
'settings.company.sort': 'name ASC',
I tried to define "sort" as computed property, but its "get" method is called in time when I can't get a value of dynamic segment from currentHadlerInfo or from route.
Also defining of the property "sort" as computed property has strange effect, for example, when I define it as
sort: 'email ASC'
in my template it is displayed via {{sort}} as expected (email ASC).
but when I return a value from computed property, I see empty value in my template and this affects on a work of components (I can't get current sorted column)
What can I do?..
Here is a rough implementation of setting the sort properties based on dynamic segment values. The code will look like
<script type="text/x-handlebars" data-template-name="index">
{{#link-to 'sort' model.settings.user.sort}}Sort{{/link-to}}
</script>
<script type="text/x-handlebars" data-template-name="sort">
<ul>
{{#each arrangedContent as |item|}}
<li>{{item.val}}</li>
{{/each}}
</ul>
</script>
var settings = Em.Object.create({
settings: {
user: {
sort: 'val ASC'
}
}
});
App.Router.map(function() {
this.route('sort', {path: '/:sortParams'});
});
App.SortRoute = Ember.Route.extend({
params: null,
model: function(params) {
this.set('params', params);
return [{val:1}, {val:5}, {val:0}];
},
setupController: function(controller, model) {
this._super(controller, model);
var props = this.get('params').sortParams.split(' ');
var property = [props[0]];
var order = props[1] === 'ASC'? true : false;
controller.set('sortProperties', property);
controller.set('sortAscending', order);
}
});
The working demo can be found here..
As you can see I access the params object in the model hook and store it on the route. In the setupController hook I access the params and set the required values on the controller.
Below are my fixture adapters.
My understanding is model hook is not called on transitionTo or link-to when a model is provided.
But when same route is reached direactly by sharing or copy pasting url model hook is called.
Now when I transition by passing a model I see the city 1 and city 2 properly.
But when I copy past url the cities are not displayed. I tried .then and then get cities still I cannot see it. I have commented that line. I know I am doing something stupid. I did googled but couldnt figure out.
here is my jsbin: BIN BIN BIN
Though this is similar to THiS question. the ans is use modelFor and then findBy. but modelFor gives model for the parent route. but in my case since its not nested routes. this.modelFor('countries') gives undefines and hence i cannot apply findBy on it.
model: function(params) {
this.store.find('country', params.countryCode).then(function(country) {
console.log(country);
//country.get('cities');
});
}
Q.Country.FIXTURES = [{
id: 1,
countryCode: "CO",
countryName: "Country",
cities: [1, 2]
}];
Q.City.FIXTURES = [{
id: 1,
cityName: "city 1",
country: 1
}, {
id: 2,
cityName: "city 2",
country: 1
}];
Q.CountryRoute = Ember.Route.extend({
model: function(params) {
return this.store.find('country', params.countryCode);
},
serialize: function(country) {
return {
country_id: country.get("countryCode")
};
},
afterModel: function(model) {
console.log("after model was called");
//this.transitionTo('cities',model);
}
});
Q.Router.map(function() {
this.resource("countries");
this.resource('country', {
path: ':country_id'
});
});
You have to return something from your model() hook. No need to use then() because in the model hook Ember will automatically wait for the promise to resolve.
model: function(params) {
return this.store.find('country', params.country_id);
}
If you want to use a slug, something like this could work:
Q.Router.map(function() {
this.resource("countries");
this.resource('country', {
path: ':country_code'
});
});
model: function(params) {
return this.store.findQuery('country', { code: params.country_code });
}
I'm trying to load two models in one route and am not having any luck figuring it out. One route to hold all information to dynamically create a form and the other model is the one in which it will push form submission data to. Here is some of what I have so far:
Router Map
App.Router.map(function() {
this.route('about');
this.route('plans');
this.resource('prices', function() {
this.resource('price', { path: '/:price_id' });
});
this.resource('apply', function() {
this.resource('getstarted');
this.resource('addresses');
this.resource('contacts');
this.resource('drivers');
this.resource('equipment');
this.resource('assign');
});
});
For the Route I have tried all three of the following
Option 1
App.GetstartedRoute = Ember.Route.extend({
model: function(){
return Ember.Object.create({
form: function() {
return EmberFire.Array.create({
ref: new Firebase("https://example.firebaseio.com/apply/getstarted")
});
},
data: function() {
return EmberFire.Array.create({
ref: new Firebase("https://example2.firebaseio.com/companies/-JAY7n7gXJeVbFCCDJdH/carriers/")
});
},
});
}
});
Option 2
App.GetstartedRoute = Ember.Route.extend({
model: function(){
return Ember.RSVP.hash({
form: function() {
return EmberFire.Array.create({
ref: new Firebase("https://example.firebaseio.com/apply/getstarted/")
});
},
data: function() {
return EmberFire.Array.create({
ref: new Firebase("https://example2.firebaseio.com/companies/-JAY7n7gXJeVbFCCDJdH/carriers/")
});
}
});
}
});
SOLUTION Option 3 - as suggested by kingpin2k
App.GetstartedRoute = Ember.Route.extend({
model: function(){
return Ember.Object.create({
form: EmberFire.Array.create({
ref: new Firebase("https://moveloaded-ember.firebaseio.com/apply/getstarted/")
}),
data: EmberFire.Array.create({
ref: new Firebase("https://logistek.firebaseio.com/companies/-JAY7n7gXJeVbFCCDJdH/carriers/")
})
});
}
});
FireBase json at getstarted
{
"_type" : "object",
"1" : {
"type" : "text",
"placeholder" : "Type it in here...",
"name" : "carrierName",
"caption" : "What's the name of your carrier?"
}
}
The form is created via recursing through the first model, putting the data into a component that generates the form. I've tried to access the emberFire arrays in the first model using all of the following:
{{model.form.type}}
{{form.type}}
{{#each form}}
{{type}}
{{/each}}
{{#each model.form}}
{{type}}
{{/each}}
{{#each}}
{{form.type}}
{{/each}}
But it is not working...
Any ideas?
Update 1:
The fix was using option 3 as suggested by kingpin2k
also, I had to make the following change to my GetstartedController:
from:
App.GetstartedController = Ember.ArrayController.extend
to:
App.GetstartedController = Ember.ObjectController.extend
Then accessing the form model was as simple as:
{{#each form}}
{{type}}
{{/each}}
looking at the firebase code it doesn't look like it exposes any promises (so Ember.RSVP.hash won't do you any good). That being said you'll essentially just create a hash with 2 fields and return that.
return Ember.Object.create({
form: EmberFire.Array.create({
ref: new Firebase("https://example.firebaseio.com/apply/getstarted")
}),
data: EmberFire.Array.create({
ref: new Firebase("https://example2.firebaseio.com/companies/-JAY7n7gXJeVbFCCDJdH/carriers/")
})
});
I have a little EmberJS app to test things out hot to do nested resources. Sometimes accessing a parent routes/controllers data work, other times not.
Most likely this is due to a oversight on my part with how EmberJS does its magic.
Here is the app:
window.App = Ember.Application.create();
App.Router.map(function() {
this.resource('items', function() {
this.resource('item', {path: ':item_id'}, function() {
this.resource('subitems');
});
});
});
App.ApplicationController = Ember.Controller.extend({
model: {
items: [
{
id: 1,
name: 'One',
subitems: [
{
id: 1,
name: 'One One'
}, {
id: 2,
name: 'One Two'
}
]
}, {
id: 2,
name: 'Two',
subitems: [
{
id: 3,
name: 'Two One'
}, {
id: 4,
name: 'Two Two'
}
]
}
]
}
});
App.ItemsRoute = Ember.Route.extend({
model: function() {
return this.controllerFor('Application').get('model.items')
}
});
App.ItemRoute = Ember.Route.extend({
model: function(params) {
var items = this.controllerFor('Items').get('model')
var item = items.filterBy('id', parseInt(params.item_id))[0]
return item
}
});
App.SubitemsRoute = Ember.Route.extend({
model: function(params) {
var item = this.controllerFor('Item').get('model')
var subitems = item.get('subitems')
return subitems
}
});
http://jsfiddle.net/maxigs/cCawE/
Here are my questions:
Navigating to items/1/subitems throws an error:
Error while loading route: TypeError {} ember.js:382
Uncaught TypeError: Cannot call method 'get' of undefined test:67
Which i don't really get, since apparently the ItemController loads its data correctly (it shows up) and the same construct works for the ItemsRoute as well to get its data.
Since i don't have access to the parents routes params (item_id) i have no other way of re-fetching the data, even though directly accessing the data from ApplicationController works fine.
Why do i have define the root data in a controller not route?
Moving the model definition from ApplicationController to ApplicationRoute, does not work.
Conceptually, as far as i understand it, however this should even be the correct way to do it, since everywhere else i define the mode data for the controller int he route.
Or should the whole thing be better done via the controllers needs-api? As far as i understood the needs are more for only accessing extra data within the controller (or its view) but the routers job is to provide the model.
1. Navigating to items/1/subitems throws an error:
Your model is just a javascript object so there isn't a method get to fetch the data. You can access the subitems by just executing item.subitems.
Also the argument of controllerFor() should be lower case.
For instance:
this.controllerFor('application')
2. Why do i have define the root data in a controller not route?
You can set the model from the route in the setupController method.
App.ApplicationRoute = Ember.Route.extend({
setupController: function(controller) {
controller.set('model', { ... });
}
});
http://jsfiddle.net/Y9kZP/
After some more fiddling around here is a working version of the example in the question:
window.App = Ember.Application.create();
App.Router.map(function() {
this.resource('items', function() {
this.resource('item', {path: ':item_id'}, function() {
this.resource('subitems');
});
});
});
App.ApplicationRoute = Ember.Route.extend({
model: function() {
return Ember.Object.create({
items: [
Ember.Object.create({
id: 1,
name: 'One',
subitems: [
{
id: 1,
name: 'One One'
}, {
id: 2,
name: 'One Two'
}
]
}), Ember.Object.create({
id: 2,
name: 'Two',
subitems: [
{
id: 3,
name: 'Two One'
}, {
id: 4,
name: 'Two Two'
}
]
})
]
})
}
});
App.ItemsRoute = Ember.Route.extend({
model: function() {
return this.modelFor('application').get('items')
}
});
App.ItemRoute = Ember.Route.extend({
model: function(params) {
return this.modelFor('items').findProperty('id', parseInt(params.item_id))
}
});
App.SubitemsRoute = Ember.Route.extend({
model: function(params) {
return this.modelFor('item').get('subitems')
}
});
http://jsfiddle.net/maxigs/cCawE/6/ and deep link into subitems (that did not work previously) http://fiddle.jshell.net/maxigs/cCawE/6/show/#/items/2/subitems
What changed:
root-model data moved into ApplicationRoute
root-model moved into an ember object, and sub-objects are also their own ember objects (so calling get('subitems') and other ember magic works)
changed all the controllerFor('xxx').get('model') into modelFor('xxx') (lower case!), which probably has no effect other than consistency
I'm still not sure if this is now "the ember way" of doing what i have here but its consistent and works completely as wanted.