I've been trying to get this button to take me to a route called 'manage'. But somehow the data I'm passing with the {{#link-to}} does not seem to work.
router.js
this.route('manage', {path: '/:stack_id/manage'});
main.hbs
<div class="row">
<div class="pull-right">
{{#link-to "manage" list}}
<button class="btn-gray"> Manage People {{fa-icon "coffee"}}</button>
{{/link-to}}
</div>
</div>
main.js where {path: '/:stack_id'}
import Ember from 'ember';
export default Ember.Route.extend({
model: function(params) {
return this.store.find('list', params.stack_id);
},
I've tried replacing {{#link-to "manage" list}} with list.id and model.id, both of these brings the message that
"This link-to is in an inactive loading state because at least one of its parameters presently has a null/undefined value, or the provided route name is invalid.
You need to pass model.id to link-to helper but model can't be null. Make sure param is defined when you call store.find method and API returns correct response/record is found. You can use {{log model}} to check if model is defined in your template.
Related
I am trying to find whether the checkbox is checked or not in a controller.
Here's my template:
<script type="text/x-handlebars">
{{view Ember.TextField valueBinding="firstname" placeholder="First Name"}}
<input type="checkbox" name="remember_me"> Remember me </input>
<button {{action save }}>Save</button>
</script>
Here's my controller:
App = Ember.Application.create();
App.ApplicationController = Ember.Controller.extend({
save: function(){
//need to get the value of "remember_me" here
alert(this.get("firstname"));
}
});
How can I get the value of "remember_me" (whether it's checked or not) in the controller. Can I do valueBinding on the check box. If so , can you please give me an example syntax.
jsfiddle:
http://jsfiddle.net/Rtd4d/
You should probably use the input helper that ember provides (see the docs).
{{input type="checkbox" checked=remember_me}}
To get the model that is set on a controller, use this.get('model').
So, to get the remember_me attribute from the model, it's simply
this.get('model').get('remember_me')
Assuming remember_me is a boolean attribute, this should return true or false.
See the jsbin.
EDIT
I didn't realize that by default the controller will delegate to it's model, so
this.get('remember_me')
should work.
I can't make it work. The problem lies in the projects route, notes and info routes are not being linked
App.Router.map(function() {
this.resource('about');
this.resource('projects', function() {
this.route('new');
this.resource('project', { path: ':project_id'}, function(){
this.route('info', { path: "/info"});
this.route('notes', { path: "/notes"});
});
});
this.resource('posts', function() {
this.route('new');
this.resource('post', { path: ':post_id' });
});
});
The project template making the call to project_notes.hbs and project_info.hbs is as follows.
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<a class="brand" href="#">{{title}}</a>
<ul class="nav">
<li>{{#link-to 'project.Info' project}}Info{{/link-to}}</li>
<li>{{#link-to 'project.Notes' project}}Notes{{/link-to}}</li>
</ul>
</div>
</div>
{{outlet}}
After reading this I was able to go a step further but still it's not working. Let me know if you need more info like the project model or anything.
Error
This link-to is in an inactive loading state because at least one of its parameters presently has a null/undefined value, or the provided route name is invalid.
Thanks in advance.
EDIT
The route is ProjectInfoRoute which is fine, the pointing URL is /projects/:project_id/info which is also absolutely fine. But when I click in the Project in order to go to Project/Project_id now it says There is no route named info.index
This is defining info as a this.route if I use this.resource it's like the route for info gets twisted since it's InfoRoute instead of ProjectInfoRoute. (If I go for the resource, after getting into the project template, I click on info and I can't get to see that template.) I'm scratching my head here.
Don't send it, additionally it should be link-to should be lower case
<ul class="nav">
{{#if model}}
<li>{{#link-to 'project.info' model}}Info{{/link-to}}</li>
<li>{{#link-to 'project.notes' model}}Notes{{/link-to}}</li>
{{else}}
do some other menu here, go to projects, or something
{{/if}}
</ul>
additionally you can find out the scope and values of properties really easy by tossing them into the template or logging them
{{project}}
{{log project}}
{{log model}}
{{log this}}
My authentication system uses lightboxes, so that when a user clicks "Sign In" or "Sign Up", a lightbox pops up for them to input their credentials. The page they were on remains rendered behind the lightbox, and when they're done signing in, the lightbox disappears and the view returns to the way it was. I can get this to work when I deviate from the conventional Ember route flow by using a lot of Jquery, but I'd prefer to integrate this more tightly into the rest of my Ember app.
The problem is, the conventional Ember route flow expects views and templates to be handled in a particular way. Specifically, a route such as /sign-in will render the sign-in template within the application template, erasing whatever was there before. Since I want to preserve the view that was there before, this approach doesn't work.
Is there a way to tell an Ember view not to erase the current view, but instead to render an independent view such as a lightbox?
You can use named outlets and render a template into the outlet, in my aplication template I has an outlet called modal, and two actions in the ApplicationRoute, openModal and closeModal. The open one receives a template name and uses the route method render to set the outlet content, the close one renders an empty template.
App.ApplicationRoute = Ember.Route.extend({
actions: {
openModal: function(modal) {
this.render(modal, {into:'application', outlet: 'modal'});
},
closeModal: function() {
this.render('empty', {into: 'application', outlet: 'modal'});
},
}
});
Html handelbars
<script type="text/x-handlebars" data-template-name="application">
{{! Other application template code}}
<button {{action openModal 'hellow.modal'}}>Open it!</button>
{{outlet modal}}
</script>
<script type="text/x-handlebars" data-template-name="empty"></script>
<script type="text/x-handlebars" data-template-name="hellow/modal">
<div class="modal">
<div class="modal-header">
Hellow
</div>
<div class="modal-footer">
<button {{action closeModal}}>Close</button>
</div>
</div>
</script>
This is adapted from http://nerdyworm.com/blog/2013/04/20/ember-modal-example/
I am attempting to create a basic CRUD setup for managing 'User' objects in Ember. I think I have my models and routes in order. I'm struggling with managing:
A) The proper controller setup for the (all) users page. I think that I should be creating an ArrayController, but it seems to work fine automatically. Does my Ember App know to make an array of individual 'user' objects? if so, how?
B) Passing data from InputFields. If you click 'Add User' in my example, I have made a form to create a user. When you click 'create', I'm not sure how to get the textField values, nor do I understand what to do with those values once I have them. How would I update my controller?
Again, here a jsbin of my code. Any guidance would be greatly appreciated.
Regarding A):
I assume you refer to the following route of your App. This model function returns an Array. Therefore Ember knows that it should use an ArrayController to render your UsersRoute.
App.UsersIndexRoute = Ember.Route.extend({
model: function() {
return App.User.find();
}
});
Regarding B): I have updated your code -> http://jsbin.com/ozilam/15/edit
I needed to update some of your names (controller and view) to match the naming conventions of Ember.
With Ember you do not have to use forms and manually read those values. Instead you create a new records, when you enter your Route:
App.UsersNewRoute = Ember.Route.extend({
setupController : function(controller){
controller.set("content", App.User.createRecord({}));
}
});
Inside your View you are binding on the properties of your record. As you see i also updated your button with an action helper.
<script type="text/x-handlebars" data-template-name="users/new">
<div class="row">
<div class="six columns">
<h3>New User Information</h3>
<form>
<label>First Name</label>
{{view Ember.TextField valueBinding='name_first'}}<br />
<label>Last Name</label>
{{view Ember.TextField valueBinding='name_last'}}<br />
<label>Email Address</label>
{{view Ember.TextField valueBinding='email_address'}}<br />
<label>SSN</label>
{{view Ember.TextField valueBinding='ssn'}}<br />
<button {{action create target="view"}} class="button">Create</button>
{{#linkTo users}}Cancel{{/linkTo}}
</form>
</div>
</div>
</script>
As those changes in the form get automatically propagated to your controller, you can just access the object in the controller:
App.UsersNewView = Ember.View.extend({
didInsertElement: function() {
this.$('input:first').focus();
},
create: function(){
console.log('view submitted');
var newUser = this.get("controller.content");
console.log(newUser.get("name_first"));
console.log(newUser.get("name_last"));
// HOW DO I PROCESS THIS FORM
}
});
Note: As i am writing this i am realizing that it would be probably better, if you would handle this event in your Controller instead of the View, since its an data modification task.
I'm trying to figure out when to render a custom view with render and when via view. I know that rendering with render we get the full context (view, controller). But what about view? View is supposed to be for custom views and handing events.
The example below comes form ember data example
contacts.hbs
<div class="span3">
<div class="well sidebar-nav">
<ul class="nav nav-list">
<li class="nav-header">All contacts</li>
{{#each contact in controller}}
{{view App.ContactInListView contentBinding="contact"}}
{{/each}}
</ul>
</div>
</div>
<div class="span9">
{{outlet}}
</div>
contact_in_list_view.hbs
App.ContactInListView = Em.View.extend({
templateName: 'contact_in_list',
tagName: 'li',
classNameBindings: 'isActive:active',
isActive: function() {
return this.get('content.id') === this.get('controller.activeContactId');
}.property('controller.activeContactId')
});
contact_in_list.hbs
{{#linkTo "contact" contact}}{{contact.fullName}}{{/linkTo}}
Couldn't just I render contact_in_list with render and pass it some controller?
When should I use render and when view? What's the rule of thumb?
Couldn't just I render contact_in_list with render and pass it some controller?
The {{render}} helper can be passed a model but not controller. Probably what you want in this case is the {{each}} helper's itemController property
{{#each contact in controller itemController="contactInList"}}
{{view App.ContactInListView}}
{{/each}}
Have a look at API docs for Ember Handlebars.helpers
When should I use render and when view? What's the rule of thumb?
Use the {{render}} helper when you want to render a view/template in the current context using the singleton instance of the same-named controller.
Use the {{view}} helper when you want to render a view in the current context without changing to another controller. Like {{view Ember.TextField}}