I want to show the user-profile of the user after login. So i figured I'll make the Application.Controller an ObjectController and set it's model property to the user-object.
The problem I'm having right now is that I don't know how to show the user-properties in the nested profile template?
I actually saw other answers on SO using {{#each todo in App.todosController.content}}. but that only works for an ArrayController. Maybe this is only possible with an ArrayController, I really don't know, but that would be strange. Thanks for any help!
To test this I'm setting the model of the Application.Controller to the user-object when login is succesful.
Here is my code:
<script type="text/x-handlebars" id="profile">
<div class="content">
<div class="content-padded">
<div>
<p><h3>Username: {{{user.username}}}</h3><p>
<p>trials: {{user.trials}}</p>
<p>results: {{user.results}}</p>
<p>email: {{user.email}}</p>
</div>
</div>
</div>
</script>
App.Router.map(function() {
this.resource('signup');
this.resource('login');
this.resource('profile');
this.resource('practice');
this.resource('overview');
});
App.LoginController = Ember.ObjectController.extend({
model: {},
needs: ['application'],
loggedInUser: {id: 9,
username: "rooty",
trials: "fghsds",
results: "fdfsd",
email: "dsefs#ds.com"},
loginHandler: function(data) {
// sign in logic
this.set("controllers.application.isLoggedIn", true);
this.set("controllers.application.model", loggedInUser);
}
});
App.ApplicationController = Ember.ObjectController.extend({
isLoggedIn: false
});
The user-object looks like this:
User {id: 9,
username: "rooty",
trials: "fghsds",
results: "fdfsd",
email: "dsefs#ds.com"}
You're so close! So your login controller sets the model on the application controller. Your controller's Login Controller's needs property means that all properties on the scope of the Application controller will be available to your Login controller. Following that logic, couldn't your profile controller also needs: ['application']?
With a little work, we can call refer to users like you'd like from your profile controller:
needs: ['application'],
users: Ember.computed.alias('controllers.application.model')
Then in your profile template, what you already have should work:
<div>
<p><h3>Username: {{{user.username}}}</h3><p>
<p>trials: {{user.trials}}</p>
<p>results: {{user.results}}</p>
<p>email: {{user.email}}</p>
</div>
JSBin
Notice in the JSBin that on the index controller, I have a computed alias for the applications model. The input helper's value in the index template is bound to this computed alias, aka the application's model. Observe in the application template that I only use {{model}}. As you type in the input, you see the model change thanks to Ember's powerful binding so we've definitely targeted the application model via the needs and computed alias.
Same thing with the profile template.
Related
I'm trying to create a page that contains master/detail, which is obviously easy using a static {{ outlet }} in ember, however, I'd like the detail to slide down after the row that was selected. For example, on this page: http://jsbin.com/ijejap/1/edit, if the detail of the name was to appear after the currently selected name instead of at the bottom of the page.
The problem I'm trying to solve is that I can't have an outlet within a repeater so that when I click Row 1, I want the outlet to be positioned below Row 1, and when I click Row 2, I want the outlet after Row 2. In other words, I want to dynamically position an outlet, I think, unless there's another way to do it.
Ok, I finally made a conditionnal outlet depending on wether the user is selected or not, but I had to work with DS.Model and its FIXTURES to make this work.
To be brief, I added an action before the link to set a selected property on the user object and record which user is selected to prevent having two users at the same time.
The position of the {{outlet}} then depends on the current selected user.
Here's the template part:
{{#each model}}
<li {{action 'select' this}}>
{{#link-to "user" this}}{{first}}{{/link-to}}
</li>
{{#if selected}}
{{outlet}}
{{/if}}
{{/each}}
And the App.ApplicationController part:
App.ApplicationController = Ember.ArrayController.extend({
currentUser: null,
actions: {
select: function(newUser) {
var oldUser = this.get('currentUser');
if(newUser !== oldUser) {
if(oldUser)
oldUser.toggleProperty('selected');
this.set('currentUser', newUser);
newUser.toggleProperty('selected');
}
}
}
});
Finally, the model definition:
App.ApplicationRoute = Ember.Route.extend({
model: function() {
return this.store.find('user');
}
});
App.User = DS.Model.extend({
first: DS.attr(),
last: DS.attr(),
avatar: DS.attr()
});
Here's the link to the JSBin: http://jsbin.com/cilari/3/
You can make use of components power here.
I made it on JSBin : http://jsbin.com/zovos/2/
First, you declare your user details as a new component, say user-details :
<script type="text/x-handlebars" id="components/user-details">
<li>{{user.first}}</li>
<h2>
{{user.first}} {{user.last}}
<img {{bindAttr src="user.avatar"}} class="pull-right" width=50 />
</h2>
<dl>
<dt>First</dt>
<dd>{{user.first}}</dd>
<dt>Last</dt>
<dd>{{user.last}}</dd>
</dl>
</script>
Then you call it from your list, using the current user as the user in the component :
<script type="text/x-handlebars">
<div class="container">
<div class="row-fluid">
<ul class="nav nav-list span3 well">
{{#each model}}
{{user-details user=this}}
{{/each}}
</ul>
</div>
</div>
</script>
You add the selected property to your component and an action like expandDetails :
App.UserDetailsComponent = Ember.Component.extend({
selected: false,
actions: {
expandDetails: function() {
this.toggleProperty('selected');
}
}
});
Finally, you add the action to your component template and a conditional display on the selected property :
<script type="text/x-handlebars" id="components/user-details">
<li><a {{action "expandDetails"}}>{{user.first}}</a></li>
{{#if selected}}
<h2>
{{user.first}} {{user.last}}
...
</dl>
{{/if}}
</script>
And, of course, you get rid of your user route.
Here is a link to Ember's Guide that show this on a sample post example : http://emberjs.com/guides/components/handling-user-interaction-with-actions/
Hope this helps.
Are you looking for an accordion?
http://addepar.github.io/#/ember-widgets/accordion
I have an idea but unproved yet, maybe you can try it.
For detail, you only need one template. For master, you need write several named outlet (see: http://emberjs.com/guides/routing/rendering-a-template/) and place each below the corresponding item of master view.
When each master item has been clicked, you need pass a param to the detail route in order to let it know what kind of data should be populated.
The key part is the renderTemplate hook of route (see: http://emberjs.com/api/classes/Ember.Route.html#method_renderTemplate). You can take advantage of it because it allows you to specify which named outlet should be used to render the template.
Or you may load all details' data at once and cache it, then pass an identifier when master item got clicked, in this way you can filter the model in advance and get prepared for later renderTemplate use.
This is just an idea and currently don't have spare time to try it, but as your wish, you got the dedicated route, controller and model. I think it is highly doable, let me know it you make any progress.
Hi I'm trying to create one data using emberjs + ember-data + rest adapter.
It works when the data is save, but in the template that i'm using it's possible that you redirect back for the list of "groups" in this case if you already pass in the route of group create, it generates one empty register into the store, i'd like to avoid that, but i'm not sure what i should put into the route to specify what is the model data that i'd be handling while attempt to insert.
The same scenario happens when in the controller after call "save" it retrieves one error in the API that i'm requesting it also make the insert at the database.
I've research a bit and I could not found anywhere something clear of how to create one record, and handle that in case of errors or in case that someone leaves the template view without trigger the action to persist the data.
Router:
App.GroupsCreateRoute = Ember.Route.extend
model: ->
#store.createRecord('group')
renderTemplate: ->
#render 'groups.create',
outlet: 'content'
into: 'application'
For that controller is render one view that has a form and in submit it calls the action save of controller:
Template:
<div class="container-content">
<h1>Group</h1>
{{#link-to 'groups' }}List Groups{{/link-to}}
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="name">Name</label>
<div class="controls">
{{input type="text" name="name" id="name" value=name}}
</div>
</div>
</form>
<p>
<button {{action save}}>Save</button>
</p>
</div>
Controller
App.GroupsCreateController = Ember.ObjectController.extend
needs: ['group']
actions:
"save": (data) ->
group = #get('model')
group.set('name', #get('name'))
group.save().then =>
#transitionToRoute 'groups'
How is the right way to create one router + controller to create data in emberjs?
Firstly, I would recommend invoking any store/data methods in the router, not the controller. To handle removing the data when leaving the route you need to implement the deactivate method on the route, which will be triggered when the user navigates from the route. In there, you need to delete the model:
AppGroupsNewRoute = Ember.Route.extend
model: ->
#store.createRecord 'group'
deactivate: ->
#get('currentModel').deleteRecord
If you don't want to show the model if it is not saved to the store, then you need to filter the displayed list by the 'isSaved' property on the model.
In a toy application, I have a 'posts' template that shows all of the post titles. When you click each title, instead of heading to a 'show' view I want to expand down the rest of the contents of that post, directly inline.
I've considered having the postRoute reuse the postsRoute and set a flag that would then be checked against in the handlebars template to splat out the rest of the post content.
What would be a preferred 'Ember-ish' approach that would let a resource's singular view be rendered inline with its index view in the correct location?
I would suggest to define an itemController on PostsController which can take actions for individual post objects.
Then, in your template define the action (e.g. toggleBody) that toggles a property on the itemController. You can use this property to show or to hide the body of each post:
App.PostsController = Ember.ArrayController.extend
itemController: 'post'
App.PostController = Ember.ObjectController.extend
showBody: no
actions:
toggleBody: ->
#toggleProperty('showBody')
return false
<script type="text/x-handlebars" data-template-name="posts">
<ul>
{{#each}}
<li>{{title}} <span {{action toggleBody}} class='label'>Toggle</span>
{{#if showBody}}
<div>{{body}}</div>
{{/if}}
</li>
{{/each}}
</ul>
</script>
See also this jsFiddle for a working demo.
Using ember.js I have an input:
{{input id="my_input" name="my_input" type="text"}}
Then I want to create a link, using linkTo, but want the value of the input to be part of the href. Like this:
{{#linkTo 'my_resource' my_input}}the link{{/linkTo}}
I have the resource defined like this:
App.Router.map(function() {
this.resource("my_resource", {path: ":my_input"});
});
Is that possible?
Thanks.
Definitely:
http://emberjs.jsbin.com/eFAGixo/1/edit
App.Router.map(function() {
this.resource('search', {path:'search/:search_text'});
});
App.SearchRoute = Ember.Route.extend({
model: function(params){
// at this point params.search_text will have
// what you searched for
// since you are sending a string, it will hit the model
// hook, had you sent an object it would have skipped this
// hook and just used the object as your model
return { searchInThisRoute: params.search_text};
}
});
<script type="text/x-handlebars" data-template-name="application">
<h2>Welcome to Ember.js</h2>
{{input value=searchText}}
{{#link-to 'search' searchText}} Go To Search{{/link-to}}
{{outlet}}
</script>
PS: This actually seems like it would make more sense as a button and using Ember Actions, but this works just as dandy.
I have started learning Ember.js and have been trying to make a page with some data that updates when I get an event (pushed by web sockets).
To make it simple I made an example where I have a list of nodes and when I get a new node I want to call addNode on the controller to add the node. The UI should then update.
The problem I have is that the only way I managed to do this is by having a Global Controller, and then using that in my template instead of my model for the template.
I would like to link up the controller to the route, and have a method on the controller add data when the event arrives - not by having some global list or something.
is this possible? And if so how?
I have included my sample so you can change it and show me how its done.
js:
x = {title : 'test'};
App = Ember.Application.create();
App.Router.map(function() {
this.resource("system");
});
App.NodesController = Ember.ArrayController.create({
content: [],
addNode: function(nodeInfo){
this.pushObject(nodeInfo);
}
});
html:
<script type="text/x-handlebars" id="system">
{{#each App.NodesController}}
{{title}}
{{/each}}
</script>
Thanks, Jason
This is a little shady, but I'm not sure if the ember guys have provided another method of getting the controller externally yet.
jsbin
You've to put needs in your system controller.
App.SystemController - Ember.Controller.extend({
needs:['nodes']
});
and in your system template,
<script type="text/x-handlebars" id="system">
{{#each controllers.nodes}}
{{title}}
{{/each}}
</script>