I'm learning ember.js on a small example app and there is a final piece I can't get to work.
I have a list of "quips" (tweets) and there is a text input field that allows to create a new one. After I submit a new tweet, I want to clear the text input, to no avail. I basically copied the todomvc example verbatim at this point and it works there (I even use the same ember.js and ember-data.js versions just to rule out this possibility).
Here is the template:
<script type="text/x-handlebars" data-template-name="index">
<h2>Latest Quips</h2>
<div>
{{view Ember.TextField id="new-quip" placeholder="Enter your Quip"
valueBinding="newQuip" action="createQuip"}}
</div>
The action in the appropriate controller:
App.IndexController = Ember.ArrayController.extend({
createQuip: function() {
App.Quip.createRecord({
text: this.get('newQuip'),
user: 'ree'
});
this.set('newQuip', ''); // this row should clear the view
this.get('store').commit();
}
});
And the model for the sake of completeness:
App.Quip = DS.Model.extend({
text: DS.attr('string'),
user: DS.attr('string')
});
App.Store = DS.Store.extend({
revision: 11,
adapter: 'App.QuipsAdapter'
});
App.Quip.FIXTURES = [
{ id: 1, user: 'ree', text: 'Which is the best JS MVC?' },
{ id: 2, user: 'baaz', text: '#ree Definitely Ember.js!' }
];
App.QuipsAdapter = DS.FixtureAdapter.extend({});
The app runs here.
I would be really glad if someone could point at what I'm doing wrong.
Thank you,
Balint
It's a bug related to jQuery 1.9.0 - try v1.8.x
Also, as I can recall, it's been fixed on master, so grabbing the latest Ember release may also solve your problem.
Related
I'm having a weird issue with the Ember.Select view when I try to bind its value to a model.
Here is an abstract of what I'm doing, the complete jsbin can be found here:
Using JavaScript: http://jsbin.com/jayutuzazi/1/edit?html,js,output
Using CoffeeScript: http://jsbin.com/nutoxiravi/2/edit?html,js,output
Basically what I'm trying to do is use an attribute of a model to set an attribute of another model.
I have the Age model like this
App.Age = DS.Model.extend({
label: DS.attr('string'),
base: DS.attr('number')
});
And an other model named Person like this
App.Person = DS.Model.extend({
name: DS.attr('string'),
ageBase: DS.attr('number')
});
The template looks like this:
<!-- person/edit.hbs -->
<form>
<p>Name {{input value=model.name}}</p>
<p>
Age
{{view "select" value=model.ageBase
content=ages
optionValuePath="content.base"
optionLabelPath="content.label"}}
</p>
</form>
What I am trying to do is have a select in the Person edit form that lists the ages using base as value and label as label.
I expect the correct value to be selected when loading and to change when the selected option changes.
Has can be seen in the jsbin output, the selected is correctly populated but it sets the ageBase value of the edited person to undefined and does not select any option. The model value is correctly set when an option is selected though.
Am I doing something wrong ? Is it a bug ? What am I supposed to do to make this work ?
Thank you :)
You can conditionally render based on fulfilment of the ages as follows, since select doesn't handle promises (more on that below):
{{#if ages.isFulfilled}}
{{view "select" value=ageBase
content=ages
optionValuePath="content.base"
optionLabelPath="content.label"}}
{{/if}}
I updated your JsBin demonstrating it working.
I also illustrate in the JsBin how you don't have to qualify with model. in your templates since object controllers are proxies to the models they decorate. This means your view doesn't have to be concerned with if a property comes from the model or some computed property on the controller.
There is currently a PR #9468 for select views which I made a case for getting merged into Ember which addresses some issues with selection and option paths. There is also meta issue #5259 to deal with a number of select view issues including working with promises.
From issue #5259 you will find that Ember core developer, Robert Jackson, has some candidate select replacements. I cloned one into this JsBin running against latest production release version of Ember.
There is nothing at all preventing you using Roberts code as a select view replacement in your app. Asynchronous collections/promises will just work (and it is MUCH faster rendering from the benchmarks I have seen).
The template for that component is just:
{{#if prompt}}
<option disabled>{{prompt}}</option>
{{/if}}
{{#each option in resolvedOptions}}
<option {{bind-attr value=option.id}}>{{option.name}}</option>
{{/each}}
The js of the component is:
App.AsyncSelectComponent = Ember.Component.extend({
tagName: 'select',
prompt: null,
options: null,
initialValue: null,
resolvedOptions: null,
resolvedInitialValue: null,
init: function() {
var component = this;
this._super.apply(this, arguments);
Ember.RSVP.hash({
resolvedOptions: this.options,
resolvedInitialValue: this.initialValue
})
.then(function(resolvedHash){
Ember.setProperties(component, resolvedHash);
//Run after render to ensure the <option>s have rendered
Ember.run.schedule('afterRender', function() {
component.updateSelection();
});
});
},
updateSelection: function() {
var initialValue = Ember.get(this, 'resolvedInitialValue');
var options = Ember.get(this, 'resolvedOptions') || [];
var initialValueIndex = options.indexOf(initialValue);
var prompt = Ember.get(this, 'prompt');
this.$('option').prop('selected', false);
if (initialValueIndex > -1) {
this.$('option:eq(' + initialValueIndex + ')').prop('selected', true);
} else if (prompt) {
this.$('option:eq(0)').prop('selected', true);
}
},
change: function() {
this._changeSelection();
},
_changeSelection: function() {
var value = this._selectedValue();
this.sendAction('on-change', value);
},
_selectedValue: function() {
var offset = 0;
var selectedIndex = this.$()[0].selectedIndex;
if (this.prompt) { offset = 1; }
return Ember.get(this, 'resolvedOptions')[selectedIndex - offset];
}
});
The problem is that in:
{{view "select" value=model.ageBase
When the app starts, value is undefined and model.ageBase gets synchronized to that before value is synchronized to model.ageBase. So, the workaround is to skip that initial undefined value.
See: http://jsbin.com/rimuku/1/edit?html,js,console,output
The relevant parts are:
template
{{view "select" value=selectValue }}
controller
App.IndexController = Ember.Controller.extend({
updateModel: function() {
var value = this.get('selectValue');
var person = this.get('model');
if ( value ) { // skip initial undefined value
person.set('ageBase', value);
}
}.observes('selectValue'),
selectValue: function() {
// randomly used this one
return this.store.find('age', 3);
}.property()
});
givanse's answer should work.
I don't think it's because value is undefined, but because value is just an integer (42) and not equal to any of the selects content, which are Person objects ({ id: 2, label: 'middle', base: 42 }).
You could do something similar to what givens suggests or use relationships.
Models
//
// Models
//
App.Person = DS.Model.extend({
name: DS.attr('string'),
ageBase: DS.belongsTo('age', { async: true })
});
App.Age = DS.Model.extend({
label: DS.attr('string'),
base: DS.attr('number')
});
//
// Fixtures
//
App.Person.reopenClass({
FIXTURES: [
{ id: 1, name: 'John Doe', ageBase: 2 }
]
});
App.Age.reopenClass({
FIXTURES: [
{ id: 1, label: 'young', base: 2 },
{ id: 2, label: 'middle', base: 42 },
{ id: 3, label: 'old', base: 82 }
]
});
Template:
<h1>Edit</h1>
<pre>
name: {{model.name}}
age: {{model.ageBase.base}}
</pre>
<form>
<p>Name {{input value=model.name}}</p>
<p>
Age
{{view "select" value=model.ageBase
content=ages
optionValuePath="content"
optionLabelPath="content.label"}}
</p>
</form>
Ok, I found a solution that I think is more satisfying. As I thought the issue was coming from ages being a promise. The solution was to ensure that the ages list was loaded before the page was rendered.
Here is how I did it:
App.IndexRoute = Ember.Route.extend({
model: function() {
return Ember.RSVP.hash({
person: this.store.find('person', 1),
ages: this.store.findAll('age')
});
}
});
That's it! All I need from there is to change the view according the new model:
{{#with model}}
<form>
<p>Name {{input value=person.name}}</p>
<p>
Age
{{view "select" value=person.ageBase
content=ages
optionValuePath="content.base"
optionLabelPath="content.label"}}
</p>
</form>
{{/with}}
The complete working solution can be found here: http://jsbin.com/qeriyohacu/1/edit?html,js,output
Thanks again to #givanse and #Larsaronen for your answers :)
So I want to use query parameters in the URL of my application. The Ember guide describes the solution: http://emberjs.com/guides/routing/query-params/
Unsuccessfully I tried it out in my ember-cli project, so I've set up a small test project without cli.
Route:
App.IndexRoute = Ember.Route.extend({
model: function() {
return ['red', 'yellow', 'blue'];
}
});
Template:
<script type="text/x-handlebars" id="index">
<ul>
{{#each item in model}}
<li {{action 'pickColour' item}}>{{item}}</li>
{{/each}}
</ul>
<div>Currently selected: {{selected}}</div>
</script>
Controller:
App.IndexController = Ember.ArrayController.extend({
queryParams: ['selected'],
selected: null,
actions: {
pickColour: function(colour) {
console.log("Colour " + colour + " selected");
this.set('selected', colour);
}
}
});
According to the Ember guide this should bind the selected field of the controller to the url parameters. But in this case no url parameters is set when I click a specific colour.
It should be so simple yet I can't make it work. Am I gloriously overlooking something?
Edit: SOLUTION
I missed the fact that for now it's only available in the beta. If you read this in the future, be aware that it might be available in the latest full release.
This is working just fine in version 1.9.0, so this question can probably be closed.
Working demo here
I am trying to set up a dashboard that can monitor and display information on multiple models. The ArrayController seems like the correct object to use, but I am not sure what I am doing wrong.
Can someone explain where I've gone astray here?
jsBin Example: http://jsbin.com/IgoJiWi/8/edit?html,js,output
javascript:
App = Ember.Application.create();
/* ROUTES */
App.Router.map(function() {
this.resource('options');
this.resource('dashboard');
});
App.IndexRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('options');
}
});
App.OptionsRoute = Ember.Route.extend({
model: function() {
var a = Em.A();
a.pushObject( App.Options.create({title: 'A', cost: '100'}));
a.pushObject( App.Options.create({title: 'B', cost: '200'}));
a.pushObject( App.Options.create({title: 'C', cost: '300'}));
return a;
}
});
/* MODELS */
App.Options = Ember.Object.extend({
title: '',
cost: '',
quantity: ''
});
/* CONTROLLERS */
App.optionsController = Ember.ArrayController.extend({
legend: 'test',
len: this.length,
totalCost: function() {
return this.reduce( function(prevCost, cost, i, enumerable){
return prevCost + cost;
});
}.property('#each.cost')
});
handlebars:
<script type="text/x-handlebars" data-template-name="application">
<p><strong>Ember.js example</strong><br>Using an ArrayController to access aggrigated data for all models of type X.</p>
{{render dashboard}}
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="options">
<h2>Options:</h2>
<dl>
{{#each}}
<dt>Title: {{title}}</dt>
<dd>Cost: {{cost}} {{input value=cost}}</dd>
{{/each}}
</dl>
</script>
<script type="text/x-handlebars" data-template-name="dashboard">
<h2>Overview:</h2>
<p>Why won't this display info about the options below? I suspect that the optionsController does not actually contain options A-C...</p>
{{#with App.optionsController}}
<p>Total number of options (expect 3): {{len}}</p>
<p>Total cost of options (expect 600): {{totalCost}}</p>
{{/with}}
</script>
Without getting into the why of doing things this way, there were a couple problems with making it just work.
optionsController needs to be OptionsController
the active controller in the dashboard will be DashboardController (autogenerated if not defined) so you need to open that and give it a reference to options
in reduce, the second argument is an item reference, so you need to do get('cost') on it
in order for javascript to know you want integer math, you need to use parseInt
This is a working jsbin: http://jsbin.com/acazAjeW/1/edit
lol, kingpin2k and I seem to be competing for answering ember questions these days.
Part of the problem is, your dashboard exists even when the options may not, which might be the route you are going in the future, here's a partial version that works, I'll look into the other version.
http://jsbin.com/ImOJEJej/1/edit
Using render
http://jsbin.com/ImOJEJej/3/edit
I'm trying to create a todo-app (original, right?) and have a problem that ember doesn't display my newly created objects if use find({some parameters}) instead of find().
The problem seems to be that App.Model.find() returns a different result than, for example, App.Model.find({checked: false}).
I've created TasksRoute and defined the model data as App.Task.find().
When using App.Task.find() I can create a new task by typing:
var task = App.Task.createRecord({name: "taskName"});
task.get("store").commit();
The list is updated and the view displays the newly created task.
But if I instead use App.Model.find({}), or with any other hash, and then create a task nothing happens.
Here's the html:
<script type="text/x-handlebars" data-template-name="application">
{{#linkTo "tasks"}}Tasks{{/linkTo}}
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="tasks">
{{#each controller}}
{{name}}<br />
{{/each}}
</script>
Javascript:
App = Em.Application.create();
App.Store = DS.Store.extend({
revision: 12,
adapter: DS.RESTAdapter.create({url: "http://localhost/backend/"})
});
App.Task = DS.Model.extend({
name: DS.attr('string')
})
App.TasksRoute = Ember.Route.extend({
model: function() {
return App.Task.find();
}
});
App.Router.map(function(){
this.route('tasks');
});
App.TasksController = Em.ArrayController.extend({});
The reason that I don't want to use find() is that I want to be able to specify my query. For example I would like to be able to retrieve all tasks that are checked by providing a hash to find().
(I tried creating a jsFiddle but didn't manage to get it to work with fixtures)
Is this a bug or have I done something wrong?
Thanks in advance
You might want to use filterProperty('checked', false) instead of find({params})
I'm trying to produce a select input and pass the selected object to the change event on the view. The ember contact example uses a <ul> but with a select the view needs to be outside the each otherwise the change even isn't fired.
Here is the view js:
App.SelectView = Ember.View.extend({
change: function(e) {
//event for select
var content = this.get('content');
console.log(content);
App.selectedWidgetController.set('content', [content]);
},
click: function(e) {
//event for ul
var content = this.get('content');
console.log(content);
App.selectedWidgetController.set('content', [content]);
}
});
The ul from the example works:
<ul>
{{#each App.widgetController.content}}
{{#view App.SelectView contentBinding="this"}}
<li>{{content.name}}</li>
{{/view}}
{{/each}}
</ul>
But if I replace html directly, the change event isn't fired (which makes sense)
<select>
{{#each App.widgetController.content}}
{{#view App.SelectView contentBinding="this"}}
<option>{{content.name}}</option>
{{/view}}
{{/each}}
</select>
So I guess the select has to be wrapped in the view.. in which case how do I pass the relevant object?... This code results in the entire array being passed:
{{#view App.select_view contentBinding="App.widgetController.content"}}
<select>
{{#each App.widgetController.content}}
<option>{{name}}</option>
{{/each}}
</select>
{{/view}}
Ember now has a built-in Select view.
Here's a usage example:
var App = Ember.Application.create();
App.Person = Ember.Object.extend({
id: null,
firstName: null,
lastName: null,
fullName: function() {
return this.get('firstName') + " " + this.get('lastName');
}.property('firstName', 'lastName').cacheable()
});
App.selectedPersonController = Ember.Object.create({
person: null
});
App.peopleController = Ember.ArrayController.create({
content: [
App.Person.create({id: 1, firstName: 'Yehuda', lastName: 'Katz'}),
App.Person.create({id: 2, firstName: 'Tom', lastName: 'Dale'}),
App.Person.create({id: 3, firstName: 'Peter', lastName: 'Wagenet'}),
App.Person.create({id: 4, firstName: 'Erik', lastName: 'Bryn'})
]
});
Your template would look like:
{{view Ember.Select
contentBinding="App.peopleController"
selectionBinding="App.selectedPersonController.person"
optionLabelPath="content.fullName"
optionValuePath="content.id"}}
Again, here's a jsFiddle example: http://jsfiddle.net/ebryn/zgLCr/
check out the answers to a similar question: How to bind value form input select to attribute in controller
In the examples a CollectionView is used with an tagName=select. You may find this helpful in getting it work.
EDIT: Since I was looking to implement a select myself, here is the solution I came up with:
views/form.js.hjs:
{{#view contentBinding="App.typeController" valueBinding="type" tagName="select"}}
{{#each content}}
<option {{bindAttr value="title"}}>{{title}}</option>
{{/each}}
{{/view}}
{{#view Ember.Button target="parentView" action="submitEntry"}}Save{{/view}}
The select is part of a form. I do check for the submit event and in there read the value:
app.js.coffee
# provides the select, add value: 'my_id' if you need differentiation
# between display name (title) and value
app.typeController = Ember.ArrayProxy.create
content: [{title:'Energy'}, {title:'Gas'}, {title:'Water'}]
# simplified version, but should prove the point
app.form_view = Ember.View.create
templateName: 'views_form'
type: null
submitEntry: () ->
console.log this.$().find(":selected").val()
Hope this helps.
This isn't an Answer, just a fix on the broken jsfiddle link.. Apparently jsfiddle has no love for ember :/ But JsBin does! http://jsbin.com/kuguf/1/edit