I can't for the life of me figure out why this won't work. Maybe it's obvious, but I've been staring at it too long.
I want the {{input}} pre-populated with the value of Title, the label gets filled in correctly...
<ul>
{{#each}}
<li>
{{input type="text" value=Title }}
<label>{{Title}}</label>
</li>
{{/each}}
</ul>
here's a Gist
Here's the javascript:
window.App = Ember.Application.create({
LOG_TRANSITIONS: true
});
App.ApplicationAdapter = DS.FixtureAdapter.extend();
App.Router.map(function () {
this.resource('Kids', { path: '/' });
});
App.KidsRoute = Ember.Route.extend({
model: function () {
return this.store.find('Kid');
}
});
App.Kid = DS.Model.extend({
Title: DS.attr('string'),
Age: DS.attr('number')
});
App.Kid.FIXTURES = [
{
id: 0,
Age: 5,
Title: "Joe"
},
{
id: 1,
Age: 9,
Title: "Max"
}
];
There seems to be a little bug with {{input}}. The problem was that title is capitalized. I got it to work in this bin. I would recommend to start your attribute names always with a small letter. This is some kind of convention. Most often you will encounter this style opposed to yours.
These are the changes i made to get it to work:
1 - add an alias to title, which is not capitalized:
App.Kid = DS.Model.extend({
Title: DS.attr('string'),
Age: DS.attr('number'),
title : Ember.computed.alias("Title")
});
2 - use the uncapitalited version with the helper:
{{input type="text" value=title }}
Related
I am prototyping an emberjs app. I am facing a problem when I try to save the data.
My model:
App.User = DS.Model.extend({
id: DS.attr('string'),
name: DS.attr('string'),
description: DS.attr('string')
});
My Controller:
App.UsersAddController = Ember.ArrayController.extend({
actions: {
addUser: function () {
var name = this.get('name');
var description = this.get('description');
if (!name.trim() && !description.trim()) {
return;
}
var user = this.store.createRecord('user', {
'id': 'id-' + Math.random().toString(36).substr(2, 16),
'name': name,
'description': description
});
this.set('id', '');
this.set('name', '');
this.set('description', '');
user.save();
}
}
});
My template:
{{input type="text" placeholder="Name" value=name class="name-input"}}
{{input type="text" placeholder="Description" value=description class="name-input"}}
<button {{action 'addUser'}} class="submit">Submit</button>
The event bubbles up to the right controller. But fails to save. I am a beginner with emberjs. Please help me out.
You should remove id attribute from model definition.
App.User = DS.Model.extend({
// no id
name: DS.attr('string'),
description: DS.attr('string')
});
Below is a very simple app which takes the model object from controllers and shows using handle bars. I am unable to access properties that is nested inside a property like {{foobar.foo.bar}}.
JavaScript
app = Ember.Application.create({
rootElement: '#foo'
});
app.IndexRoute = Ember.Route.extend({
setupController: function(controller) {
controller.set('foobar', foobar);
}
});
foobar = {
name: 'item name',
foo: {
bar: 'value',
id: 1
}
};
HTML/Handlebars
<div id="foo">
<p>Name: {{foobar.name}}</p>
<p>Name: {{foobar.foo.bar}}</p>
</div>
{{foobar.name}} works while {{foobar.foo.bar}} does not. Any ideas?
Your code looks alright to me. I tried in in a jsfiddle (you can play with it if you like) and everything's fine. You might have mispell a property or something like that.
Is it your real code or a simplification for StackOverflow purpose ?
In any case, for this kind of situation, I strongly encourage you to install the Emberjs Inspector Extension, which will help you target your issue by taking a look at each property.
Template :
<h2>Ember.js DEMO</h2>
<script id="index" type="text/x-handlebars">
INTERNAL : <br/>
{{foobar}} <br/>
{{foobar.name}} <br/>
{{foobar.foo}} <br/>
{{foobar.foo.bar}} <br/>
{{foobar.foo.id}} <br/><br/>
EXTERNAL : <br/>
{{foobarExt}} <br/>
{{foobarExt.name}} <br/>
{{foobarExt.foo}} <br/>
{{foobarExt.foo.bar}} <br/>
{{foobarExt.foo.id}} <br/>
</script>
Javascript :
App = Ember.Application.create();
App.Router.map(function () {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({
setupController: function(controller) {
controller.set('foobar', {
name: 'item name',
foo: {
bar: 'value',
id: 1
}
});
controller.set('foobarExt', externalfoobar);
}
});
var externalfoobar = {
name: 'item name',
foo: {
bar: 'value',
id: 1
}
};
Im wondering here, how to show models data e.g Organization model>name field in ember view
I tried something like this.
organization VIEW
OrganizationObserver : function(){
var organizationModel = this.get('controller.organizations');
//this.OrganizationComputedProperty(organizationModel);
console.log(organizationModel);
}.observes('controller.organizations').on('init'),
OrganizationComputedProperty: function(){
console.log("herrro");
}.property('organization'),
Model
var Organization = DS.Model.extend({
name: DS.attr('string'),
address: DS.belongsTo('agents/address')
});
// Initial data for Organization model, only applies when using
// FixtureAdapter
Organization.FIXTURES = [
{
id: 1,
name: 'TU',
address: 1,
},
{
id: 2,
name: 'TLU',
address: 2,
}
];
Main hbs
{{#each personFormCount}}
{{view 'organization'}}
{{/each}}
Controller
personFormCount: [{id: 1}, {id: 2}]
But i know that's wrong, because they watch for change behaviours which don't take place in model..
Cheers,
Kristjan
Since i was capable of getting model to my view by this.get('controller.organizations')
Which is defined in route
controller.set('organizations', this.store.findAll('agents/organization'));
I looked at the select once again
{{view Ember.Select
contentBinding="organizations"
optionValuePath="content.id"
optionLabelPath="content.name"
selectionBinding="selectedAgent"
class="form-control"
}}
And i just added controller.organizations to contentBinding
{{view Ember.Select
contentBinding="controller.organizations"
optionValuePath="content.id"
optionLabelPath="content.name"
selectionBinding="view.selectedAgent"
class="form-control"
}}
I have an ember application which has a number of users. Each of these users can be associated with a number of subjects. So I have a subjects model:
App.Subjects = DS.Model.extend({
subject : DS.attr('string'),
});
App.Subject.FIXTURES = [{
id: 1,
name: 'Sales',
}, {
id: 2,
name: 'Marketing',
}
];
and a users model:
App.User = DS.Model.extend({
name : DS.attr(),
email : DS.attr(),
subjects : DS.hasMany('subject'),
});
App.User.FIXTURES = [{
id: 1,
name: 'Jane Smith',
email: 'janesmith#thesmiths.com',
subjects: ["1", "2"]
}, {
id: 2,
name: 'John Dorian',
email: 'jd#sacredheart.com',
subjects: ["1", "2"]
}
];
I am having trouble representing this 1:M relationship in my templates. I have an edit user template (which Im also using to create a user) in which you can select the user's subjects via checkboxes. However, I want these checkboxes to be driven by the data in my subjects model. Is this possible? I have found very little documentation online and am very new to ember development. Here is my template:
<script type = "text/x-handlebars" id = "user/edit">
<div class="input-group">
<div class="user-edit">
<h5>User name</h5>
{{input value=name}}
<h5>User email</h5>
{{input value=email}}
<h5>Subjects</h5>
{{input type="checkbox" value = "sales" name="sales" checked=sales}}
{{input type="checkbox" value = "support" name="support" checked=support}}
</div>
<button {{action "save"}}> Save </button>
</div>
</script>
EDIT: Here is my current userController.js
App.UserController = Ember.ObjectController.extend({
deleteMode: false,
actions: {
delete: function(){
this.toggleProperty('deleteMode');
},
cancelDelete: function(){
this.set('deleteMode', false);
},
confirmDelete: function(){
// this tells Ember-Data to delete the current user
this.get('model').deleteRecord();
this.get('model').save();
// and then go to the users route
this.transitionToRoute('users');
// set deleteMode back to false
this.set('deleteMode', false);
},
// the edit method remains the same
edit: function(){
this.transitionToRoute('user.edit');
}
}
});
what you need to do is change this line in your template:
{{#each subject in user.subject}}
{{subject.name}},
{{/each}}
for this:
{{#each subject in user.subjects}}
{{subject.name}},
{{/each}}
did you notice I changed subject for subjects ?
and, I would also recommend you to change this code in App.SubjectController:
selected: function() {
var user = this.get('content');
var subject = this.get('parentController.subjects');
return subject.contains(user);
}.property()
to this:
selected: function() {
var subject = this.get('content');
var userSubjects = this.get('parentController.subjects');
return userSubjects.contains(subject);
}.property()
that's a better representation of the data.
I have a model setup with Ember fixtures. My model is like the following:
App.Question = DS.Model.extend({
isCompleted: DS.attr('boolean'),
question_top: DS.attr('string'),
question_bottom: DS.attr('string'),
etc......
});
My fixtures (the actual data) is like the following:
App.Question.FIXTURES = [
{
id: 1
},
{
id: 2
}
];
I want to create a unordered list in my template that shows a "li" item for each record in my Fixtures. I think I need to use the {{#each question}} syntax but when I do {{#each question}}, it doesn't work.
How do I loop through my Fixtures data to create a unordered list, with one list item for each record in my Fixtures data?
Probably your question property doesn't exist in your controller. If you are doing:
App.QuestionRoute = Ember.Route.extend({
model: function() {
return this.store.find('question');
}
});
You can use:
<h2>Questions:</h2>
<ul>
{{#each model}}
<li>{{question_top}}</li>
{{/each}}
</ul>
Give a look in that fiddle http://jsfiddle.net/marciojunior/25GHN/
You need to return it to a route's model hook:
http://emberjs.jsbin.com/UGEmEXEy/1/edit
App.IndexRoute = Ember.Route.extend({
model: function() {
return this.store.find('question');
}
});
App.QuestionAdapter = DS.FixtureAdapter;
App.Question = DS.Model.extend({
isCompleted: DS.attr('boolean'),
question_top: DS.attr('string'),
question_bottom: DS.attr('string')
});
App.Question.FIXTURES = [
{
id: 1,
isCompleted: true
},
{
id: 2,
isCompleted: false
}
];