about this reps demo.
route:
this.resource('index',{path:'/'}, function(){
this.route('login',{path:'/login'});
this.route('signup',{path: '/signup'});
})
index
- login
- signup
index -- render index.hbs -> index_login.hbs
index.login --render index.hbs -> index_login.hbs
index.signup --render index.hbs -> index_signup.hbs
I have no idea! I just want to reuse index.hbs, but I don't how to control.
Based on your code:
<div class="well">
<h1>index</h1>
{{outlet}}
Welcome Ember.js! {{#link-to 'index.signup'}}signup{{/link-to}}
</div>
By default (not overriding route.renderTemplate), the {{outlet}} will be automatically updated when the content of index/login.hbs or index/signup.hbs when you enter on each specific route.
<script type="text/x-handlebars" data-template-name="index/login">
<script type="text/x-handlebars" data-template-name="index/singup">
To show Login when you transition to 'index' (IndexRoute), you could define your IndexRoute or IndexIndexRoute to redirect to IndexLoginRoute.
Yodemo.IndexIndexRoute = Ember.Route.extend({
beforeModel: function(transition) {
this.transitionTo('index.login');
}
});
http://emberjs.jsbin.com/titabaxe/3/edit
Related
I am trying to render a set of tabs for a set of objects (conversations) using the render helper for each. This is not part of a route as it is a persistent part of the interface. I have run into a problem where only the view with the same name as the model gets the intended controller (i.e. the panel contents and not the tab headers).
I have a Chat model, object controller and array controller (deliberately simplified here):
App.Chat = DS.Model.extend({ });
App.ChatsController = Ember.ArrayController.extend({
needs: 'application',
content: Ember.computed.alias('controllers.application.currentChats'),
});
App.ChatController = Ember.ObjectController.extend({ });
The ArrayController needed the needs/content properties because the chats are loaded in the application controller. I used the currentChats name as other routes may load non-current chats.
App.ApplicationController = Ember.Controller.extend({
init: function(){
this.store.find('chat', {"current": true});
this.set('currentChats', this.store.all('chat'));
}
});
I have no difficulty rendering the chat contents with the appropriate controller (into the 'chat' template). However, the chat tabs are given the default ObjectController, and therefore can't fire actions.
<script type="text/x-handlebars" id="application">
<!--application template-->
{{outlet chats}}
</script>
<script type="text/x-handlebars" id="chats">
<div id="chats">
<ul id="chat-tabs">
{{#each}}
{{render 'chatTab' this}}
{{/each}}
</ul>
{{#each}}
{{render 'chat' this}}
{{/each}}
</div>
</script>
<script type="text/x-handlebars" id="chatTab">
<!--tab template-->
</script>
<script type="text/x-handlebars" id="chat">
<!--chat template-->
</script>
The application router is as follows:
App.ApplicationRoute = Ember.Route.extend({
model: function(){ },
renderTemplate: function(){
this.render('application', { });
this.render('chats', {
into: 'application',
outlet: 'chats',
controller: 'chats'
});
}
});
This seems to come solely down to naming of the templates. The template called 'chat' inherits the correct controller, but chatTab doesn't despite receiving a chat as the model. Is there any way to force the view to inherit the correct controller? Or am I going about this in an idiosyncratic way.
Many thanks for your help to this Ember novice.
Andrew
It goes solely off the name provided to the render. The easiest way is to just create the other controller and extend the chat controller.
App.ChatTabController = App.ChatController.extend();
We have a scenario along these lines:
Quote
--->Create
So route names quote and quote.create.
The issue is that we need to render the templates into the main outlet. So in our main route (that all other are inherited from) we have this:
renderTemplate: function() {
this.render({ into: 'application' });
}
When I navigate to quote it renders the quote view. From there I navigate to quote.create and it renders the create view. However, going back to quote from quote.create renders nothing.
How can I get around this?
When I go back to the \quote url route 'quote.index' is sought. Since it is defined 'automagically' nothing happens. When I define the route explicitly ember tries to find the quote.index template and view and these do not exist.
A workaround I tried is to have this:
App.QuoteIndex{Route|Controller|View} = App.Quote{Route|Controller|View}.extend()
EDIT:
Hey diddle-diddle, here is my fiddle :) http://jsfiddle.net/EbenRoux/Mf5Dj/2/
Ember.js does not rerender a parent view when transitioning to a parent route, so using into with a parent view template is not recommended.
There is an easier way to create what you are trying to: use a quote/index route:
<script type="text/x-handlebars" data-template-name="application">
<h1>Rendering Issue</h1>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="quote">
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="quote/index">
<h2>Quote View</h2>
{{#linkTo 'quote.create'}}Create a new quote{{/linkTo}}
</script>
<script type="text/x-handlebars" data-template-name="quote/create">
<h2>Quote Create View</h2>
<p>Some controls would go here.</p>
{{#linkTo 'quote'}}Go back to quote view{{/linkTo}}
</script>
App = Ember.Application.create({});
App.ApplicationRoute = Ember.Route.extend({
activate: function () {
this.transitionTo('quote');
}
});
App.Router.map(function () {
this.resource('quote', function () {
this.route('create');
});
});
See http://jsfiddle.net/eYYnz/
See JSFiddle: http://jsfiddle.net/cyclomarc/aYmuJ/3/
I set a property in the application controller and want to display this property in a partial view. This does not seem to work. I can access the property in the template itself, but not in the partial view rendered within the template ..
index.html
<script type="text/x-handlebars">
<h3>Ember access to controller properties</h3>
{{#linkTo 'about'}}About{{/linkTo}} <br><br>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="about">
Access to property in index template: <br>
<b>{{controllers.application.applicationVersion}}</b>
<br><br>
{{render "_footer"}}
</script>
<script type="text/x-handlebars" data-template-name="_footer">
Footer text (partial view) with a controller property:<br>
<b>{{controllers.application.applicationVersion}} MISSING</b>
</script>
app.js
var App = Ember.Application.create({});
App.Router.map(function () {
this.resource('about', { path: "/about" });
});
App.IndexRoute = Ember.Route.extend({
redirect: function () {
this.transitionTo('about');
}
});
App.ApplicationController = Ember.Controller.extend({
//Set some properties
applicationVersion: "1.0.0"
});
App.AboutController = Ember.Controller.extend({
needs: "application"
});
render view helper have your own context.
To use the current context in a other template use the partial view helper.
{{partial "footer"}}
When you use render a new controller is created, in that case named generated _footer controller.
Using partial will preserve the controller bound to the template that called the partial template
And since you used needs in about controller, you don't have it in the new generated controller.
Here is a sample
What I have so far:
App = Ember.Application.create({
LOG_TRANSITIONS: true
});
App.Router.map(function(match){
match('/').to('application');
match('/edit').to('edit');
});
App.ApplicationRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('edit');
},
events: {
startEdit: function( context ){
this.transitionTo( 'edit' );
}
}
})
App.EditRoute = Ember.Route.extend({
init: function(){
this._super()
console.log('EditRoute')
},
});
Handlebars:
<script type="text/x-handlebars" data-template-name = 'application'>
Hello World
{{ outlet main }}
</script>
<script type="text/x-handlebars" data-template-name = 'edit'>
<div class = 'edit-background'> Edit State: {{ title }} </div>
</script>
I have four questions:
When I open the application it just remains in the home page, is the redirectTo hook suppose to immediately redirect you to another state?
In addition, I have this events hash in AplicationRoute per suggestion from here: How to programmatically transition between routes using Ember.js' new Router. but I read through the answers and still am not sure how you are supposed to use it.
How do I test the router on the console? before you could navigate between the states by calling transitionTo commands, what do I do now?
For some odd reason, my application template seem to rendered twice, as in there are two 'Hello World' up there, and when try to add something like: <li>{{#linkTo edit}}edit{{/linkTo}}</li>
I get this error:
'Uncaught TypeError: Cannot read property 'container' of undefined -- ember.js:2223'
This is how you would initially load the editView/route/template on application start up:
Router
App.Router.map(function(match){
match('/').to('application',function(match){
match('/').to('edit')
})
})
ApplicationTemplate
<script type="text/x-handlebars" data-template-name="application">
{{outlet}}
</script>
EditTemplate
<script type="text/x-handlebars" data-template-name="edit">
I am embedded!
</script>
EditRoute
EditRoute = Ember.Route.extend({
renderTemplates:function () {
this.render('edit', {
into:'application'
});
})
I'm making a simple Ember application that takes some Tumblr json, lists the posts, and then lets you go to a post detail view with a link back to default posts view.
The issue right now is that when using the {{action}} handlebars template tag the link back to the 'showHome' route doesn't work, and the 'showPost' action shows the last post in the json instead of the one specified as the context in the action tag.
Here are my templates:
<script type="text/x-handlebars" data-template-name="main-tmpl">
<h1>
<a {{action showHome}}>{{view.content.title}}</a>
</h1>
{{&view.content.description}}
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="post-tmpl">
{{#if view.content.is_photo }}
{{#if view.detail }}
<img {{bindAttr src="view.content.photo-url-500"}}>
{{else}}
<a {{action showPost view.content href=true}} class="thumbnail">
<img {{bindAttr src="view.content.photo-url-75"}}></a>
{{/if}}
{{/if}}
</script>
Here are my routes:
App.Router = Ember.Router.extend({
root: Ember.Route.extend({
showHome:Ember.Route.transitionTo('index'),
showPost:Ember.Route.transitionTo('postDetail'),
loading: Em.Route.extend({
connectOutlets: function(router, context){
router.get('applicationController').connectOutlet('loading', context)
}
}),
index: Em.Route.extend({
route: '/',
deserialize:function(router, params) {
var deferred = jQuery.Deferred(),
resolve = function() { console.log("resolved"); deferred.resolve() }
/* Cut for brevity [...] */
return deferred.promise()
},
connectOutlets:function(router) {
router.get('applicationController').connectOutlet('tumbleLog')
router.get('tumbleLogController').connectOutlet('posts')
}
}),
postDetail:Em.Route.extend({
route:'/post/:id',
connectOutlets:function(router,post) {
console.log('my post is', post)
router.get('tumbleLogController').connectOutlet('postDetail', post)
}
})
})
})
And here's the fiddle: http://jsfiddle.net/colinkahn/PegYL/
I don't know weather this can count as the answer, but like I said in the comments, as of today (October 25th of 2012) this can be solved by replacing ember-1.0-pre with ember-latest, since 1.0-pre has known bugs which are being fixed on latest.
Also, like Eduard mentioned, while in development it's always a good idea to have enableLogging set to true in your router so you know what's going on.
Peace