Computed property in handlebar #if not updating - ember.js

I am trying to use the following template:
<script type="text/x-handlebars" data-template-name="login">
{{#if logged_in}}
Logged in
{{else}}
Not logged in
{{/if}}
</script>
with the model:
App.Login = DS.Model.extend({
access_token: DS.attr('string'),
logged_in: function() {
return (this.get('access_token') != null);
}.property('access_token')
});
to display the user's logged-in state.
The access_token is being set via an async callback in the Route's setupController:
App.LoginRoute = Ember.Route.extend({
setupController: function(controller, model) {
controller.set('content', model);
// call async login method
window.setInterval(function test() {
model.set('access_token', 'MY_ACCESS_TOKEN');
console.log(model.get('access_token'));
}, 5000);
},
model: function() {
return App.Login.find();
}
});
The problem is logged_in never seems to change (even though the model.set line is executed and 'access_token' is updated). Am I doing something wrong or should I be filing a bug?
Full code: http://jsfiddle.net/Q8eHq/

You are setting the model to App.Login.find() which returns an enumerable, not a single object. One way to do it, is to set the model to a single object:
App.LoginRoute = Ember.Route.extend({
model: function() {
return App.Login.find(1);
}
});
Or if you are going to use a dynamic route (e.g. users/login/9):
App.LoginRoute = Ember.Route.extend({
model: function(params) {
return App.Login.find(params.id);
}
});

Related

Ember json search with multiple TextFields

Ember noob here. I'm basically trying to have multiple input fields for multiple parameters. As the user types into the fields, this sends off a request to a PHP script which returns the relevant JSON and displays it.
Ember 1.6.1 (latest version is a pain to learn as all of the docs are
out of date)
Handlebars 1.3.0
jQuery 1.11.1
Here's the code so far (not working for multiple).
index.html
<script type="text/x-handlebars" data-template-name="search">
{{view App.SearchTextField elementId="bedrooms" valueBinding=bedrooms upKeyAction="searchProperties" placeholder="Bedrooms"}}
{{view App.SearchTextField elementId="suburb" valueBinding=suburb upKeyAction="searchProperties" placeholder="Sydney"}}
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="search/results">
{{#each}}
<h1>{{bedrooms}} - {{street}} {{suburb}}</h1>
{{/each}}
</script>
apps.js
App = Ember.Application.create();
App.Router.map(function() {
this.resource('search', {path: '/'}, function(){
this.route('results', {path: '/search/:suburb/:bedrooms'});
});
});
App.SearchRoute = Ember.Route.extend({
actions: {
searchProperties: function(suburb, bedrooms) {
console.log(suburb);
this.transitionTo('search.results', suburb, bedrooms);
}
}
});
App.SearchResultsRoute = Ember.Route.extend({
model: function(params) {
return Ember.$.getJSON('../test/data.php?suburb='+params.suburb+'&bedrooms='+params.bedrooms);
}
});
App.SearchTextField = Ember.TextField.extend({
keyUp: function (e) {
if (e.target.id == 'bedrooms') {
var bedrooms = e.target.value;
} else if (e.target.id == 'suburb') {
var suburb = e.target.value;
}
console.log(suburb + bedrooms);
this.sendAction('action', suburb, bedrooms);
}
});
After some playing around I got it to work using this (looking more jQuery than Ember, but hey it works)
App = Ember.Application.create();
App.Router.map(function() {
this.resource('search', {path: '/'}, function(){
this.route('results', {path: '/search/:suburb/:bedrooms'});
});
});
App.SearchRoute = Ember.Route.extend({
actions: {
searchProperties: function(data) {
this.transitionTo('search.results', data.suburb, data.bedrooms);
}
}
});
App.SearchResultsRoute = Ember.Route.extend({
model: function(params) {
return Ember.$.getJSON('../test/data.php?suburb='+params.suburb+'&bedrooms='+params.bedrooms);
}
});
App.SearchTextField = Ember.TextField.extend({
keyUp: function (e) {
var data = {suburb:$('#suburb').val(), bedrooms:$('#bedrooms').val()};
this.sendAction('upKeyAction', data);
}
});
Is there a better way to do this?
You are kind of over complicating things IMO,
I'd prefer to observe for the value changes in the controller and act accordingly. Result in much reduced code, and in fact you are actually exploiting the features, the framework provides.
Sample implementation, may need to modify to fulfill your needs
App.SearchController = Ember.ObjectController.extend({
suburb : null,
bedrooms : null,
doSearch : function(){
var model = [{street: this.get('suburb'), bedrooms: this.get('bedrooms')}];
//var model = Ember.$.getJSON('../test/data.php?suburb='+this.get('suburb')+'&bedrooms='+this.get('bedrooms'));
this.transitionToRoute('search.results', model);
}.observes('suburb', 'bedrooms')
});
App.SearchRoute = Ember.Route.extend({
});
App.SearchResultsRoute = Ember.Route.extend({
});
App.SearchTextField = Ember.TextField.extend({});
FIDDLE

Multiple controllers for one view - request for the model not set

I got the following code:
App.ApplicationSerializer = DS.ActiveModelSerializer.extend({});
App.Router.map(function(){
this.resource('clients', { path : '/' });
});
App.ApplicationAdapter = DS.RESTAdapter.extend({
namespace: 'api'
});
App.ClientsRoute = Ember.Route.extend({
setupController: function(controller, model){
controller.set('model', model);
this.controllerFor('patients').set('model', this.store.find('patient'));
}
});
When the main page is loaded a request is sent only to localhost:3000/api/patients and not to clients which is the main controller for the given view :/
Can you spot the mistake? I am using App.ApplicationSerializer = DS.ActiveModelSerializer.extend({});
I thought that might be the error, but after removing it I saw no changes at all.
You are not defining the model for ClientsRoute:
App.ClientsRoute = Ember.Route.extend({
model: function() {
return this.store.find('client');
}
});
The only case where its not necessary to define the model, is when the route is a simple dynamic segment (show a specific record). Example:
App.Router.map(function() {
this.route('client', { path: '/clients/:client_id' });
});
App.ClientRoute = Ember.Route.extend({
// Default model (no need to explicitly define it):
// model: function(params) {
// return this.store.find('client', params.client_id);
// }
});

What is the reference for this Ember.js guides setupController multiple models with arraycontroller

Presently I am going though every page and snippit of code in the Ember.js Guides and building a small sample app. Some I have gotten stuck on for a bit but solved. This one however befuddles me.
At http://emberjs.com/guides/controllers/representing-multiple-models-with-arraycontroller/
It's also here but does not use the .get('songs") http://emberjs.com/guides/controllers/representing-a-single-model-with-objectcontroller/
App.SongsRoute = Ember.Route.extend({
setupController: function(controller, playlist) {
controller.set('model', playlist.get('songs'));
}
});
I don't know what playlist.get('songs') is referencing. I assume it's a model object array inner object but I am wrong obviously. But since the example code at their site does not have mock stub data to work from I am just guessing from all of my tests.
The code provided here has some commented out bits to see what I was testing.
<script type="text/x-handlebars" data-template-name="songs">
<h1>Playlist</h1>
<ul>
{{#each}}
<li>{{name}} by {{artist}}</li>
{{/each}}
</ul>
</script>
<script type="text/x-handlebars" data-template-name="playlist">
<h3>Playlist: </h3>
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.6/ember.min.js"></script>
<script type="text/javascript">
window.App = Ember.Application.create();
App.Router.map(function () {
this.resource('songs');
this.resource('playlist');
});
App.IndexRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('songs');
}
});
// App.SongsRoute = Ember.Route.extend({
// setupController: function(controller, model) {
// controller.set('model', model);
// },
// model: function () {
// // return songs;
// return playlist.songs;
// }
// });
App.SongsRoute = Ember.Route.extend({
playlist: function() {
var playlist = { songs: [{fish: "fish"}, {fish: "fish"}] };
return playlist;
}.property(),
setupController: function(controller, playlist) {
controller.set('model', playlist.get('songs'));
}
});
App.PlaylistRoute = Ember.Route.extend({
setupController: function(controller, model) {
controller.set('model', model);
},
model: function () {
return playlist;
}
});
App.SongsController = Ember.ArrayController.extend();
var songs = {
duration: 777,
name: 'Ember',
artist: 'Jimmy Smith',
};
var playlist = {
songs: [
{
id: 1,
duration: 777,
name: 'Ember',
artist: 'Jimmy Smith',
},
{
id: 2,
duration: 888,
name: 'jQuery',
artist: 'Hyper Cat',
}
]
};
</script>
Unfortunately this link (http://emberjs.com/guides/controllers/representing-multiple-models-with-arraycontroller/) is a little confusing. They are assuming that a model relationship is there, but they are not showing it.
They are assuming that there is something like this :
App.Playlist = DS.Model.extend({
name : DS.attr('string'),
songs : DS.hasMany('song',{async:true})
});
App.Song = DS.Model.extend({
name : DS.attr('string')
});
And then generally what you'd want to do is to pull the collection from the model in setupController, and then set that as content on a nested controller that has been needed by the main controller.
App.PlaylistRoute = Ember.Route.extend({
setupController : function(controller,model){
this._super(controller,model);
this.controllerFor('songs').set('content',model.get('songs'));
}
});
App.PlaylistController = Ember.ObjectController.extend({
needs : ['songs']
});
And then since you're using ArrayController for the collection, you have built in sorting if you define the sortProperties and sortAscending properties.
App.SongsController = Ember.ArrayController.extend({
sortProperties : ['name'],
sortAscending : true
});
Here's a JSBin showing the general idea, using the FixtureAdapter.
http://jsbin.com/ucanam/1073/edit

Why model is not accessible inside controller while accessible in handlebar template?

I have a model of patient object
App.Router.map (function () {
this.resource('patients');
this.resource('patient', {path: ':patient_id'}, function(){
this.resource('dashboard', function() {
this.route('summary');
});
});
});
App.PatientRoute = Ember.Route.extend({
model: function(params) {
return App.Patient.find(params.patient_id);
},
setupController: function(){
console.log("Menu Items:" + App.PatientMenuItem.find() );
this.controllerFor('patient').set('menuItems', App.PatientMenuItem.find());
}
});
App.DashboardSummaryRoute = Ember.Route.extend({
setupController: function(){
this.controllerFor('dashboard.summary').set('content', this.controllerFor('patient').get('model'));
this.controllerFor('dashboard.summary').getPatient();
}
});
App.DashboardSummaryController = Ember.ObjectController.extend({
getPatient:function(){
console.log(this.content.get_allergies);
}
});
App.PatientController = Ember.ObjectController.extend({
menuItems:[],
});
<script type="text/x-handlebars" data-template-name="dashboard/summary">
Summary{{this.content.get_allergies}}
</script>
In the above I am not able to access the same get_allergies in DashboardSummaryController but I am able to access it in handlebars, Can anyone help me what is the mistake ?
Thanks in advance
I don't know if this alone solves the problem, but always use the get() and set() methods when accessing properties. So i would suggest to try this in your getPatient() method:
App.DashboardSummaryController = Ember.ObjectController.extend({
getPatient:function(){
console.log(this.get("content.get_allergies"));
}
});
Why does the template work? The Handlebars expression you have there is automatically translated into the call, i have suggested for your controller method.

How do I use dynamic segments in EmberJS' 2.2 router?

I can't figure out how to create routes with dynamic segments in the new router API for EmberJS. I've spent a week on it and tried many things but it doesn't work. I am really frustrated at myself because I've gone through the docs, API and source code many times and cannot figure out how to make this work. I am dying for assistance.
I am trying to achieve the following routes:
/profile/:userId -> index
/profile/:userId/activity -> activity page
/profile/:userId/...
My router is set up like this
App.Router.map(function() {
return this.resource("profile", function() {
this.route("index", { path: '/:userId' });
this.route("activity", { path: '/:userId/activity' });
});
});
Then, whenever I try to link with the linkTo helper, I receive the following error: Uncaught More objects were passed than dynamic segments
<li>{{#linkTo "profile.index" user}}overview{{/linkTo}}</li>
If I don't include the user object, then I receive another error Uncaught Error: assertion failed: Cannot call get with 'id' on an undefined object. (obviously because there's no object to take the ID of)
If it's any helper, here are my route declarations
App.ProfileIndexRoute = Ember.Route.extend({
model: function(params) {
return Ember.Object.create({
id: 1
});
},
setupController: function(controller, model) {
return controller.set("content", model);
}
});
App.ProfileActivityRoute = Ember.Route.extend({
model: function(params) {
return Ember.Object.create({
id: 1
});
},
setupController: function(controller, model) {
return controller.set("content", model);
}
});
JSBin example
You can structure your routes with a little bit more nesting to get the URLs you desire (and you don't need to have a return statement in your router):
App.Router.map(function() {
this.resource("profile", function() {
this.resource("userprofile", { path: '/:userId' }, function() {
this.route("index", { path: '/' });
this.route("activity", { path: '/activity' });
});
});
});
and then set up your routes like this:
App.IndexRoute = Ember.Route.extend({
model: function(params) {
return [Ember.Object.create({
id: 1
})];
}
});
App.UserprofileIndexRoute = Ember.Route.extend({
model: function(params) {
console.log("userindex route", params);
return Ember.Object.create({
id: 1
});
},
setupController: function(controller, model) {
return controller.set("content", model);
}
});
App.UserprofileActivityRoute = Ember.Route.extend({
model: function(params) {
return Ember.Object.create({
id: 1
});
},
setupController: function(controller, model) {
return controller.set("content", model);
}
});
You can link to the /profile/1 page:
{{#linkTo userprofile.index user}}
or link to the /profile/1/activity page:
{{#linkTo userprofile.activity user}}