Is there a way in EmberJS to have a separate template for login that doesn't render the rest of the application template? Ideally I would like to create a login component, but I can't figure out how to render it on the login route without it being wrapped in the application template.
Unfortunately there isn't. There might be some very clever hacks, but there's no way out of the box. However, I had the same problem and solved it using a simple if statement. You can use the currentRouteName property to get the current route name, which allows you to do something like this:
Application Controller
isLoginRoute: Ember.computed('currentRouteName', {
get() {
return (this.get('currentRouteName') === 'login');
}
})
Application Template
{{#if isLoginRoute}}
{{outlet}}
{{else}}
<div>
<span>Some content</span>
{{outlet}}
</div>
{{/if}}
Related
I want to add add multiple copies of a component via js and pass different params in it. The code should execute via controller action of click on a button in the template. The solution for 2.x doesn't work in Ember version 3.x(pre-octane). Can anybody please help. I can't render plain html as I am using other addon of ember in the component.
Basically you want an array with the params in the js, and then a {{#each loop invoking the components. Something like this:
#tracked componentParams = new TrackedArray();
#action showThem() {
this.componentParams.push({ value="foo" });
this.componentParams.push({ value="bar" });
this.componentParams.push({ value="baz" });
}
{{#each this.componentParams as |params|}}
<MyComponent #value={{params.value}} />
{{/each}}
<button type="button" {{on "click" this.showThem}}>Show Them</button>
(this uses TrackedArray from tracked-built-ins).
I have a route that sometimes shows a dialog. My idea for this was to create a component like this:
{{modal-dialog visible=dialogVisible contents=dialogContents}}
The route would, as needed, set the dialogVisible and dialogContents properties, and the template would pass these properties on to the modal-dialog component accordingly, so the dialog would appear and show the correct content.
But that doesn't work. Templates observe routes' models, not their properties. How can I get access to route properties in my template?
Not sure what is your problem. The way your're doing it seems correct.
controllers/index.js
actions: {
createModal: function(someSpecialContent) {
this.set('dialogVisible', true);
this.set('dialogContents', someSpecialContent);
$('#modalId').modal('show');
}
}
templates/index.hbs
{{modal-dialog visible=dialogVisible contents=dialogContents}}
templates/components/modal-dialog.hbs
{{#if visible}}
your modal html here
...
<div class="modal-body">
{{#each contents as |content|}}
{{content.stuff}}
{{/each}}
</div>
...
{{/if}}
Have you simply tried .observes('model.PROPERTY_NAME')?
Why is it that you're trying to observe this property from the route? I've done something similar before and it seemed to make much more sense setting the dialogVisible property on the controller, not the route.
I am getting some data from server and in my controller I am trying to display that in list format. What I want to do is to allow the user to click on any item of that list and call an action behind it. Here is my js code.
for(var index in posts) {
if (posts.hasOwnProperty(index)) {
console.log(1);
var attr = posts[index];
//console.log(attr);
/*$("ul#previous_recipients").append('<li class="list-group-item"><label>'+attr.name+'' +
'</label><a href="javascript:void(0)" class="close g-green" {{action "aa"}}>Add</a></li>');*/
$("ul#previous_recipients").append(Ember.Handlebars.compile('<li class="list-group-item"><label>{{attr.name}} </label>Add</li>'));
}
}
How to call action on it? {{action "test"}} is not being called.
You have to compile the handlebars template and define the test action inside actions hash in the same controller.
$("ul#previous_recipients").append(Ember.Handlebars.compile('
<li class="list-group-item"><label>{{attr.name}} </label>
Add</li>
'));
You have to move this html code from controller to a handlebars file,that will be good.
What you need to do is create an ember view and give it a
templateName
property which will contain your html and handlebars expression. Alternately, you could, inside the view say
defaultTemplate: Em.Handlebars.compile(/*your handlebars and html markup here*/)
using Jquery to do things like this is not the ember way of doing things.
I am just starting out with Ember and am curious if I had a template like the following:
<script type="text/x-handlebars">
<input type='text' id='myVal' /><button {{action "searchInventory"}} class='search_inventory'>search inventory</button>
{{outlet}}
</script>
Where would I define the searchInventory helper? It seems like it might be in some global controller that might forward it to a search results route; I have an InventoryItemController but how can I hook up the searchInventory action to this? What would be the Ember way to set this up?
Can I tell ember when invoking the action to use that controller like:
{{action "searchInventory" controller:"InventoryItem" }}
thx
I don't know how you have structured your app, but assuming you have a controller for the template above, you should define the action on that controller within an 'actions' hash. Also, you should use the
{{input}}
handlebars helper instead of using the input tag. If you do that, you can have a property on the controller for this template, say 'searchTerm' for which you can provide a valueBinding, like this:
{{input type="text" valueBinding="controller.searchTerm"}}
This will bind the input the user types into the input element to the searchTerm property on the controller. Hope this helps.
I am trying to accomplish something like this, in an ember view:
{{#if loggedIn}}
<p> I'm Logged In! </p>
{{else}}
{{view App.LoginView contentBinding="App.UserInfo"}}
{{/if}}
This doesn't work out of the box because the context for LoginView ought to be loginController, and *that controller's content" ought the be App.UserInfo.
This discussion has some related notes, and suggests outlets:
Instantiate a controller class using the {{view}} helper?
Outlets provide a clean solution to this - for example, I could do:
{{#if loggedIn}}
<p> I'm Logged In! </p>
{{else}}
{{outlet login}}
{{/if}}
and then have the router connect the controller for this view (call it homeController) to the login outlet with LoginView and some context.
However, using outlets, if the loggedIn property changes, the outlet isn't reconnected/redrawn, so if I log in and then log out again I get a blank page.
Is there a nice way to either bind the appropriate controller and controller content using the view helper, or set up the outlet in a way that makes it redraw appropriately if the loggedIn property changes?