I've got my application.hbs template where I declare several {{outlet}}s (named & unnamed) and one with specified viewClass property:
application.hbs:
{{outlet 'modal'}}
{{outlet 'notification'}}
<h1>EAK Application</h1>
{{#view 'application/content'}}
{{!some HTML markup, etc. }}
{{outlet viewClass='application/content-container'}}
{{/view}}
and my view files are placed under
app/views/application/content.js
app/views/application/content-container.js
But Ember App Kit cannot find the content-container view!
Uncaught Error: Assertion Failed: Unable to find view at path
'views/application/content-container'
Am I doing something wrong?
Edit
Meanwhile I do the simple workaround and call it like
{{#view 'application/content-container'}}
{{outlet}}
{{/view}}
but this gives my an extra <div> layer and is "less elegant" imho...
The current Ember API reference (http://emberjs.com/api/classes/Ember.Handlebars.helpers.html#method_outlet) says the property on the outlet should be view not viewClass:
{{#view 'application/content'}}
{{!some HTML markup, etc. }}
{{outlet view='application/content-container'}}
{{/view}}
Without a full understanding of the app your building, I can't make a specific recommendation, but if you want to take advantage of the deep linking URLs, you should use routes when possible to assign templates/views to outlets.
For example your IndexRoute will expect an IndexTemplate and an IndexView (or will create one behind the scenes). In the Ember App Kit they would be located in app/views/index.js and app/templates/index.hbs. Check out the Rendering a Template guide on Ember's site: http://emberjs.com/guides/routing/rendering-a-template/
Alternatively you could also use the view helper like:
{{view 'my-view'}}
The is different than the normal Ember view helper where the view helper expects the actual class. In the Ember App Kit, it's the path to the file based on the file name and path of the view from the app/views root.
Related
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}}
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 have the following (ember-1.4.0):
App.DateRangeSelectorView = Ember.View.extend({
templateName: 'date-range-selector',
selectedBinding: 'controller.selected',
dateRangeSelectorItemView: Ember.View.extend({
tagName: 'li',
classNameBindings: ['isActive:active'],
isActive: function() {
return this.get('item') === this.get('parentView.selected');
}.property('item', 'parentView.selected')
})
});
And the template:
<script type="text/x-handlebars" data-template-name="date-range-selector">
<ul class="nav nav-pills" style="margin-bottom: 10px;">
{{#view view.dateRangeSelectorItemView item="today"}}
<a href="#" {{action gotoToday}} >{{controller.content.today.label}}</a>
{{/view}}
....
</ul>
</script>
I have followed the guidelines specified here, specially:
When nesting a view class like this, make sure to use a lowercase
letter, as Ember will interpret a property with a capital letter as a
global property.
Thanks, but no thanks: ember is stubbornly saying:
Uncaught Error: Assertion Failed: Unable to find view at path 'view.dateRangeSelectorItemView'
I have tried with and without the view. prefix, but no luck. How can I render the nested view?
EDIT
The problem seems to be that the lookup performed by the container is failing. Maybe there are some capitalization or name coercion rules that I am not getting right. I would like to list all available views, so that I can recognize if my view is there, maybe with a slightly different name.
How can I list all available (registered?) views, including nested views? That would include dateRangeSelectorItemView, which is a view nested inside App.DateRangeSelectorView, and is not defined in the application itself.
I guess what I am looking for is a way of listing all objects (with their lookup names!) which are extensions of Ember.View: Ember.View.extend()
The problem is that I was using an outlet for this, and the outlet does not allow to specify a view: it generates the view according to the template name, so that my DateRangeSelectorView was not used. I have raised an issue about this.
Ember has a Application which has ApplicationView, ApplicationController and 'application' named template and 'main' named outlet and all these connect automatically.
eg.
App.ApplicationView = Ember.View.extend();
and
App.ApplicationController = Ember.Controller.extend();
so whenever my application template renders its default controller is an automatic instance of
App.ApplicationController
whose properties i can access in the template. But why does it not works with other views and controllers, i.e. if I have
App.SongView = Em.View.extend()
and
App.SongController = Em.Controller.extend()
these two do not connect. I can use any property of
App.SongController
in my song template.
I can use like :
{{view App.SongView}}
and in the template:
<script type='text/x-handlebars' data-template-name='song'>
{{name}}
</script>
and if i have a name property in App.SongController then it wont get picked up because its not connected to the View.
although i can do it like this
{{view App.SongView controllerBinding='App.songController'}}
but this requires the instance of App.songController in my js file and also using this approach we are hard-coding the controller to the template.
What is the best way for this?
Update
I am also attaching a js fiddle for my problem here:
http://jsfiddle.net/anshulguleria/K6KPJ/
If you want to render a template and its associated controller and view, you can use the {{render}} template. It works similarly to this.render in the router.
{{render "song" song}}
This example will render the song template with an instance of App.SongController and App.SongView. It will set the song controller's model to the value of song in the current context.
Here is a working JSBin that illustrates how this works.
Hello Ember jedi masters,
I'm learning Ember's framework and get some confuses while using it with handlebars helpers.
Firstly I created some view templates in my js and html and used a containerView to group those templates.
But I'm having a trouble that I can't display the value I described in my controllers of those template views.
My HTML part is like this:
<script type="text/x-handlebars" data-template-name="main">
<p>this is main template</p>
{{outlet nav}}
</script>
<script type="text/x-handlebars" data-template-name="nav">
</script>
<script type="text/x-handlebars" data-template-name="child">
<p>this is the child in nav, value is {{value}}</p>
</script>
Here's my sample code on jsfiddle (including the JS part):
http://jsfiddle.net/9K7D4/
my question is:
while the child view is rendered from container view, I couldn't get the value which is defined in my child view's controller. I must missed something in the document.. just couldn't figure it out..
Thanks for helping me!
In your example, though the child controller instantiated during application initialization, it is not connected as the controller of the child view (I think there something missing in the framework).
Anyway, if you want to refer it in the child view, you have to lookup through the router with valueBinding: 'App.router.cController.content.value'. Note I'm using lowercase, as conventionnally, ember will create an instance of XxxController as xxxController.
Then in the template, as you want to use a property from the view itself, you must use the view keyword in order to do it.
see http://jsfiddle.net/9K7D4/14/