I have two models, MyModel and MyOptions.
MyModel has a myValue property belongsTo('myOption), and myName('string').
In the view, I have an input for myName and a select with possible values of the model MyOptions.
When I select a new related row, I expect myModel to be 'dirty'. If I change myName, myModel gets 'dirty' (correctly).
What I'm doing wrong?
Thanks,
See this jsfiddle for the code
window.App = Ember.Application.create();
App.ApplicationAdapter = DS.FixtureAdapter.extend();
App.IndexController = Ember.ObjectController.extend({
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return Ember.RSVP.hash({
myModel: this.store.find('myModel', 1),
myOptions: this.store.find('myOption')
});
},
});
App.MyOption = DS.Model.extend({
name: DS.attr('name')
});
App.MyOption.FIXTURES = [
{ name: 'User a', id: 1 },
{ name: 'User b', id: 2 },
{ name: 'User c', id: 3 },
];
App.MyModel = DS.Model.extend({
myValue: DS.belongsTo('myOption'),
myName: DS.attr('string')
});
App.MyModel.FIXTURES = [
{
id: 1,
myValue: 2
}
];
<script type="text/x-handlebars" data-template-name="index">
<h1>Test</h1>
<lablel>My Value</label>{{input value=myModel.myValue.id}}
<lablel>My Name</label>{{input value=myModel.myName}}
{{view "select"
content=myOptions
selectionBinding=myModel.myValue
optionLabelPath="content.name"}}
{{myModel.isDirty}}
</script>
ember-data doesn't handle dirtyness for relationships, yet. You would need to implement it in user-space.
This is the relevant issue: https://github.com/emberjs/data/issues/2122
This old issue specifically discusses belongsTo: https://github.com/emberjs/data/issues/1367
Instead of using selectionBinding, you should use value:
{{view "select"
content=myOptions
value=myModel.myValue
optionLabelPath="content.name"}}
Related
I'm having trouble saving "hasMany" polymorphic records in Ember Data (1.0.0-beta.15). It looks as if Ember Data isn't setting the "type" property of the polymorphic relationship. Relationships in serialized records look like:
"roles": ["1", "2"]
When I expect them to look more like:
"roles":[{
"id": "1",
"type": "professionalRole"
}, {
"id": "2",
"type": "personalRole"
}
];
I see the following error in the console:
TypeError: Cannot read property 'typeKey' of undefined
If the records come back from the server in the expected format, all is well. The error only occurs when Ember Data creates the relationship.
I experience this using the FixtureAdapter, LocalStorageAdapter, and the RESTAdapter. I've read every piece of documentation I can find on the subject, but I cannot see my mistake.
I've created a CodePen to demonstrate the problem, but I'll also paste that code below.
window.App = Ember.Application.create();
App.ApplicationAdapter = DS.FixtureAdapter;
App.Person = DS.Model.extend({
name: DS.attr(),
roles: DS.hasMany('role')
});
App.Role = DS.Model.extend({
title: DS.attr(),
person: DS.belongsTo('person', {
polymorphic: true
})
});
App.ProfessionalRole = App.Role.extend({
rank: DS.attr()
});
App.ApplicationRoute = Ember.Route.extend({
setupController: function(controller) {
var person = this.store.createRecord('person', {
name: 'James'
});
var role = this.store.createRecord('professionalRole', {
title: 'Code Reviewer',
rank: 'Expert'
});
var promises = Ember.RSVP.hash({
person: person.save(),
role: role.save()
});
promises.catch(function() {
controller.set('initialSaveResult', 'Failure');
});
promises.then(function(resolved) {
controller.set('initialSaveResult', 'Success!');
var resolvedPerson = resolved.person;
var resolvedRole = resolved.role;
// Either/both of these break it
//resolvedRole.set('person', resolvedPerson);
resolvedPerson.get('roles').addObject(resolvedRole);
var innerPromises = Ember.RSVP.hash({
person: resolvedPerson.save(),
role: resolvedRole.save()
});
innerPromises.catch(function() {
controller.set('secondSaveResult', 'Failure');
});
innerPromises.then(function() {
controller.set('secondSaveResult', 'Success!');
});
});
}
});
App.ApplicationController = Ember.Controller.extend({
initialSaveResult: "Loading...",
secondSaveResult: "Loading..."
});
I am new to ember.. I have 2 models..
Music.Artist = DS.Model.extend({
name: DS.attr('string'),
dob : DS.attr('date'),
songs : DS.hasMany('song',{async:true})
});
Music.Artist.FIXTURES=[
{
id:1,
name:'John',
dob:new Date(),
songs:['1','2']
},
{
id:2,
name:'Robbin',
dob:new Date(),
songs:['1','2']
}
];
Music.Song = DS.Model.extend({
title:DS.attr('string'),
artists:DS.hasMany('artist',{async:true})
});
Music.Song.FIXTURES = [
{
id:1,
title:'A day to remember',
artists:[1,2]
},
{
id:2,
title:'Cant live without you',
artists:[1,2]
}
];
I want for url "/songs/id"... I get all the songs that has an artist with the given id.
Music.Router.map(function(){
this.resource('songs',{path:'/songs/:id'});
});
Music.SongsRoute = Ember.Route.extend({
model:function(param){
var artist = this.store.find('artist',param.id);
return artist.get('songs');
}
});
But it returns undefined... How to get the list of songs that are related to the Artist.
Is there any way i can achieve this by using only routes.
How to read the array of songs, if not through get.
Based on the current versions of Ember (1.6.1) and Ember-Data (1.0.0-beta.9), here's how I got your example working. I changed your route naming, I think you really want something like /artists/:artist_id which will list the artist's data, including all his songs.
Your Artist and Song model declarations seem fine, but I declared the fixtures like so:
Music.Artist.reopenClass({
FIXTURES: [
{
id:1,
name:'John',
dob:new Date(),
songs:['1','2']
},
{
id:2,
name:'Robbin',
dob:new Date(),
songs:['1','2']
}
]
});
Music.Song.reopenClass({
FIXTURES: [
{
id:1,
title:'A day to remember',
artists:[1,2]
},
{
id:2,
title:'Cant live without you',
artists:[1,2]
}
]
});
For the router:
Music.Router.map(function() {
this.resource('artists');
this.resource('artist', { path: '/artists/:artist_id' });
});
For the routes:
var Music.ArtistsRoute = Ember.Route.extend({
model: function() {
return this.store.find('artist');
}
});
var Music.ArtistRoute = Ember.Route.extend({
model: function(params) {
return this.store.find('artist', params["artist_id"]);
}
});
For your templates:
// artists.hbs
<ul>
{{#each}}
<li>{{#link-to 'artist' this}}{{name}}{{/link-to}}</li>
{{/each}}
</ul>
// artist.hbs
<h1>{{name}}</h1>
<hr>
<h2>Songs</h2>
<ul>
{{#each songs}}
<li>{{title}}</li>
{{/each}}
</ul>
Hope this helps!
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.
I am a starter of Ember and I try to use Ember.js(1.0.0.pre) in my app.
I am trying to set title for my Ember.Select's options to show tips when mouseover.
But, I can't find any information about the option's title in API.
Do I have to write a function myself to populate the "title" attribute?
Is there any way like "optionLabelPath" to bind "title" attribute for options?
To achieve this we need to reopen the Ember.SelectOption
here is the fiddle for the following example
MyApp = Ember.Application.create();
Ember.SelectOption.reopen({
attributeBindings: ['title'],
title: function() {
var titlePath = this.getPath('parentView.optionTitlePath');
return this.getPath(titlePath);
}.property('parentView.optionTitlePath')
});
MyApp.selectArray = [{
label: "A",
id: "1",
title: "for Apple"
},
{
label: "B",
id: "2",
title: "for Ball"
}];
Handlebars
<script type="text/x-handlebars" >
{{view Ember.Select
contentBinding="MyApp.selectArray"
optionLabelPath="content.label"
optionValuePath="content.id"
optionClassPath="content.title"
}}
</script>
Here is the simplest I could come up with:
http://jsfiddle.net/aK8JH/1/
Template:
{{view MyApp.Select contentBinding="content"}}
View:
MyApp.Select = Ember.Select.extend({
attributeBindings: ['title'],
title: 'myTitle'
});
Read this: http://emberjs.com/documentation/#toc_attribute-bindings-on-a-view
Below is what I've got after observing source code in Ember:
Ember.SelectOption.reopen({
attributeBindings: ['title'],
init: function() {
this.titlePathDidChange();
this._super();
},
titlePathDidChange: function() {
var titlePath = this.get('parentView.optionTitlePath');
if (!titlePath) { return; }
Ember.defineProperty(this, 'title', Ember.computed(function() {
return this.get(titlePath);
}).property(titlePath));
}.observes('parentView.optionTitlePath')
});