I have a router that returns data from the data model.
I want to use this data to bind it to a widget in a view.
Model:
myApp.Unit = DS.Model.extend({
active: DS.attr('boolean'),
allowdecimals: DS.attr('boolean'),
name: DS.attr('string'),
count: DS.attr('number'),
});
Router:
myApp.EunitsRoute = Ember.Route.extend({
model: function() {
return this.store.find('unit');
},
setupController: function(controller, model) {
this._super(controller, model);
controller.set('units', model);
},
actions: { ...
In the view I expect an object formated as follows:
[ {"id": 1,"active": true,"allowdecimals": true,"name": "Pint","count": 8},
{"id": 2,"active": true,"allowdecimals": true,"name": "Each","count": 8},
...]
What I am getting now in the view is an object:<DS.RecordArray:ember400>
View:
var source10 = {
datatype: "array",
datafields: [
{ name: 'id' },
{ name: 'name' },
{ name: 'allowdecimals' },
{ name: 'active' },
{ name: 'count' }
],
localdata: controller.get('units')
};
var dataAdapter10 = new $.jqx.dataAdapter(source10);
$("#eunits_grid").jqxGrid({
pageable: true,
theme: 'energyblue',
autorowheight : true,
rowsheight : 50,
pagesize: 10,
source: dataAdapter10,
....
Template:
<script type="text/x-handlebars" data-template-name="eunits">
<div class="col-md-12">
<h3 class="page-header">Edit Units</h3>
{{#if adding}}
{{view AddnewunitView}}
{{/if}}
{{view UnitsView id='eunits_grid'}}
</div>
</script>
Related
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"}}
The intent of my code is to be able to load various fixtures into a template. For example:
The family template:
{{#each model as family}}
<p>{{family.name}} + "is" + {{family.age}} + "years old"</p>
{{/each}}
The brothers fixture: [{ id:1, name:"Greg", age:40 }]
The sisters fixture: [{ id:1, name:"Mary", age:35 }]
So that when I call:
#/brothers I'd get <p>Greg is 40 years old</p>
vs
#/sisters I'd get <p>Mary is 35 years old</p>
I figure I'm having trouble with 1) the correct routing. 2) usage of {{each}}/{{with}}. 3) usage of fixtures/models. You can find EVERYTHING at my github repo. Thanks in advance for the help!
Application Template - application.hbs:
<br><br>
<div class="container">
<ul class="nav nav-pills" role="tablist">
<li class="active">Home</li>
<li>Brothers</li>
<li>Sisters</li>
</ul>
<div class="container">
{{outlet}}
</div>
</div>
Family template (to go into {{outlet}} of application) - family.hbs:
<h1>Fixtures and Models</h1>
{{#each in model as family}}
<p>{{family.name}} is here</p>
{{else}}
<li>DIDN'T WORK</li>
{{/each}}
Family models and fixtures - family.js:
App.Family = DS.Model.extend({
name : DS.attr(),
age : DS.attr()
});
App.Brothers = DS.Model.extend({
name : DS.attr(),
age : DS.attr()
});
App.Sisters = DS.Model.extend({
name : DS.attr(),
age : DS.attr()
});
App.Brothers.FIXTURES = [
{
"id" : 1,
"name" : "Greg",
"age" : 10
},
{
"id" : 2,
"name" : "Mike",
"age" : 23
}
];
App.Sisters.FIXTURES =
[
{
"id" :1,
"name" :"Mary",
"age" :15
},
{
"id" :2,
"name" :"Gina",
"age" :34
}
];
My app.js file for all the routes:
App = Ember.Application.create({
LOG_TRANSITIONS: true
});
App.Router.map(function() {
this.resource('application');
this.resource('home');
this.resource('brothers');
this.resource('sisters');
});
App.IndexRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('application');
}
});
App.FamilyRouter = Ember.Route.extend({
});
App.HomeRoute = Ember.Route.extend({
});
App.FamilyRoute = Ember.Route.extend({
});
App.BrothersRoute = Ember.Route.extend({
model: function() {
this.store.find('brothers');
},
renderTemplate: function() {
return this.render('family');
}
});
App.SistersRoute = Ember.Route.extend({
model: function() {
return this.store.find('sisters');
}
});
Again, you can find all the codez here at my github repo
You need two fixes.
First, you're using wrong #each syntax. Change it to this:
<h1>Fixtures and Models</h1>
{{#each family in model}}
<p>{{family.name}} is here</p>
{{else}}
<li>DIDN'T WORK</li>
{{/each}}
Second, you're not returning brothers models. Change to:
App.BrothersRoute = Ember.Route.extend({
model: function() {
return this.store.find('brothers');
},
templateName: 'family'
});
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!
Here is the thing I have a form which have multiple checkboxes and they have the same name attribute "classifications[]"
with the code:
<input type="checkbox" name="classification[]" value="Value 1" />
<input type="checkbox" name="classification[]" value="Value 2" />
<input type="checkbox" name="classification[]" value="Value 3" />
this works properly by default it posts "classification[]" like this
[ 0 => "Value 1", 1 => "Value 2"]
but I want this to work in an ember app so I did this (shortened version)
// index.html
{{input type="checkbox" name="classification[]" value="Cell Member" checked=classification}}
App.ApplicationController = Ember.Controller.extend({
var user = this.store.createRecord('user',{
classification: this.get("classification")
})
user.save();
})
App.User = DS.Model.extend({
classification: DS.attr("string")
});
but the only posted classification value is True..
try this
// index.html
{{#for possibleValues}}
<label>{{this.label}}</label>
{{input type="checkbox" value=this.isChecked}}
{{/for}}
<a {{action save}}>save</a>
var possibleValue = [{
label: 'Label for value 1',
isChecked: false,
value: 'Value 1'
},{
label: 'Label for value 2',
isChecked: false,
value: 'Value 2'
},{
label: 'Label for value 3',
isChecked: false,
value: 'Value 3'
}];
App = Ember.Application.create();
App.ApplicationAdapter = DS.RESTAdapter.extend();
App.ApplicationController = Ember.ObjectController.extend({
init: function () {
this._super();
var user = this.store.createRecord('user');
this.set('content', user);
},
actions:{
save: function () {
var user = this.get('content'),
collected = user.get('classifications');
this.set('collected', collected);
user.save();
}
},
//executes when isChecked is changed in one item of possibleValues
collectChecked: function () {
var classifications;
classifications = this.get('possibleValues').filterBy('isChecked', true); //filter checked only
classifications = classifications.mapBy('value'); //map values
this.set('classifications', classifications);
console.log(classifications);
}.observes('possibleValues.#each.isChecked'),
possibleValues: possibleValues
});
App.RawTransform = DS.Transform.extend({
deserialize: function(serialized) {
return serialized;
},
serialize: function(deserialized) {
return deserialized;
}
});
App.User = DS.Model.extend({
classifications: DS.attr('raw')
});
http://jsbin.com/dokiwati/6/edit
I'm trying to render mediaitems in my post template, but I'm getting this nasty console error:
Uncaught TypeError: Object photo has no method '_create'
These are my models & fixture data:
/**************************
* Models
**************************/
App.Store = DS.Store.extend({
revision: 11,
adapter: 'DS.FixtureAdapter'
});
App.Mediaitem = DS.Model.extend({
type: DS.attr('string'),
url: DS.attr('string'),
post: DS.belongsTo('App.Post')
});
App.Post = DS.Model.extend({
type: DS.attr('string'),
title: DS.attr('string'),
summary: DS.attr('string'),
body: DS.attr('string'),
date: DS.attr('date'),
mediaitems: DS.hasMany('App.Mediaitem', {embedded:true})
});
App.Post.FIXTURES = [
{
id:"post-one",
type:"news",
title:"First Post",
summary:"Ipsum Lorem",
date:"2013-02-07T16:44:57",
mediaitems:[{
id:593,
post_id:"post-one",
type:'photo',
url:'http://www.google.com'
},
{
id:789,
post_id:"post-one",
type:'photo',
url:'http://www.google.com'
}]
},
{
id:"post-two",
type:"gallery",
title:"Second Post",
summary:"Lorem ipsum",
date:"2013-02-07T16:44:57",
mediaitems:[{
id:342,
post_id:"post-two",
type:'photo',
url:'http://www.google.com'
},
{
id:231,
post_id:"post-two",
type:'photo',
url:'http://www.google.com'
}]
}
];
This is my template code:
<script type="text/x-handlebars" data-template-name="post">
<div class="detail">
{{#linkTo posts}}close{{/linkTo}}<br/>
<h2>{{id}} - {{title}}</h2>
<br/>
{{#each mediaitem in mediaitems}}
print something
{{/each}}
</div>
</script>
Can someone help me out?
The FIXTURE adapter does not support embedded relationships, at least not in rev 11.
You need each model to have its own FIXTURE definition with the record and the relationships to have the id/s of the proper child/parent.
App.Post.FIXTURES = [
{
id:"post-one",
type:"news",
title:"First Post",
summary:"Ipsum Lorem",
date:"2013-02-07T16:44:57",
mediaitems:['593','789']
},
{
id:"post-two",
type:"gallery",
title:"Second Post",
summary:"Lorem ipsum",
date:"2013-02-07T16:44:57",
mediaitems:['342','231']
}];
App.Mediaitems.FIXTURES = [{
id:342,
post_id:"post-two",
type:'photo',
url:'http://www.google.com'
},
{
id:231,
post_id:"post-two",
type:'photo',
url:'http://www.google.com'
},
{
id:593,
post_id:"post-one",
type:'photo',
url:'http://www.google.com'
},
{
id:789,
post_id:"post-one",
type:'photo',
url:'http://www.google.com'
}];