I am manually rendering some outlets:
Dashboard.IndexRoute = Ember.Route.extend({
renderTemplate : function ( ) {
this.render('index');
this.render('disposition-legend', {outlet : 'dispositionLegend'} );
},
});
The templates:
<script type="text/x-handlebars" data-template-name="application">
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
<div class="container">
{{outlet dispositionLegend}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="disposition-legend">
<div class="row">
<div class="col-lg-12 well">Legend:
{{#each controller.content}}
<span class="label" style="background-color:{{unbound color}};">{{label}}</span>
{{/each}}
</div>
</div>
</script>
Ember says that is is indeed rendering the outlet:
Rendering index with default view <Ember._MetamorphView:ember320> Object {fullName: "view:index"}
Rendering disposition-legend with <Dashboard.DispositionLegendView:ember328> Object {fullName: "view:disposition-legend"}
There are no error messages, but neither view ember320 nor view ember328 are in the DOM. The only view present in the DOM is ember299, related to the application template.
Why could that be?
(I am running ember-1.4.0)
The IndexRoute is trying to render into application template, but you want to render into index, so you need to pass the into: 'index' option.
App.IndexRoute = Ember.Route.extend({
renderTemplate : function ( ) {
this.render('index');
this.render('disposition-legend', {outlet : 'dispositionLegend', into: 'index'} );
},
});
Related
I'm building an app with multiple todo lists. The todo list used to correctly show todo model.
But I added function() to stack router to wrap todos router (so that it would correctly render todos template in stack template).
Then todos/index template (which is rendered through the outlet in todos) stopped displaying todo model.
This is my router structure:
Todos.Router.map(function() {
this.resource('stacks', {path: '/stacks'});
this.resource('stack', {path: '/stacks/:stack_id'}, function () {
this.resource('todos', { path: '/todos/:todos_id' }, function () {
// additional child routes will go here later
this.route('active');
this.route('completed');
this.route('new');
});
this.resource('todo', { path: 'todo/:todo_id' });
});
});
Stack template which renders Todo template:
<script type="text/x-handlebars" data-template-name="stack">
<h1>
<label {{action "editStack" on="doubleClick"}}>{{stackTitle}}</label>
{{input
value=stackTitle
action="createStack"}}
<div>{{model.stackTitle}}</div>
</h1>
{{render 'todos' todo}}
</div>
</script>
Then this todo template has an outlet for todo/index:
<script type="text/x-handlebars" data-template-name="todos">
<div class="container-fluid">
<section id="main">
{{outlet 'todos/index'}}
{{outlet modal}}
{{input type="checkbox" id="toggle-all" checked=allAreDone}}
</section>
</div>
</script>
And todo/index template:
<script type="text/x-handlebars" data-template-name="todos/index">
<ul id="todo-list">
<li {{bind-attr class="todo.isCompleted:completed todo.isEditing:editing"}}>
{{#each todo in model itemController="todo"}}
{{#if todo.isEditing}}
{{edit-todo class="edit" value=todo.title focus-out="acceptChanges"
insert-newline="acceptChanges"}}
{{else}}
{{input type="checkbox" checked=todo.isCompleted class="toggle"}}
{{outlet}}
<button {{action 'openModal' 'modal' model}}>
<label {{action "editTodo" on="doubleClick"}}>{{todo.title}}</label>
</button>
{{/if}}
</li>
{{/each}}
</ul>
</script>
Routers:
Todos.TodosRoute = Ember.Route.extend({
model: function() {
return this.store.find('todo');
},
});
Todos.TodosIndexRoute = Ember.Route.extend({
model: function() {
return this.modelFor('todos');
},
});
I've tried using {{partial}} helper in case that was a problem, but it didn't seem to change much.
Maybe I'm missing something in todos/index router that I need to call data through nested templates?
I appreciate your help!
There's a lot going on here but I think the root of your problem is with the way that you're using render in your templates/stack.
Since your routes/todos route is nested inside your routes/stack route, you're going to want to use an outlet inside your templates/stack if you want any of the templates for the nested routes to be rendered.
When you use render 'todos' todo, you're saying to render templates/todos with the todo property from the controllers/stack as the model. This isn't going to use your routes/todos or routes/todos-index to set the model.
What you probably want is for your templates/stack to have an {{outlet}} that either the routes/todos or routes/todo is rendered into when you visit either of those routes.
I have a rails app with ember that render one template where i want to render the app´s notes list.
The main template is :
<div class="container" style="margin-top: 30px">
......
<ul class="nav nav-list">
<li class="nav-header">list notes</li>
#ERROR -> {{ view App.NotesListView contentBinding='App.NotesIndexController' }}
</ul>
</div>
{{#linkTo "notes.new"}} <button class="btn btn-primary">Add Note</button>{{/linkTo}}
</div>
......
</div>
</div>
I have the notes_index_controller:
App.NotesIndexController = Em.ArrayController.extend
init: ->
console.log "entra en notes index controller"
selectedResource: null
isEmpty:( ->
#get('length') == 0
).property('length')
and the index_route :
App.NotesIndexRoute = Em.Route.extend
model: ->
App.Note.find()
setupController:(controller, model ) ->
controller.set('content', model )
controller.set('users', App.User.find() )
When i try to render this view ( App.NotesListView ) :
App.NotesListView = Ember.View.extend
templateName: "notes/list"
list.hbs
{{#each content}} #I supose that have to be the NotesIndex´s content but not it is
<li>test</li>
<li>{{ view App.NoteListItemView contentBinding='this' }}</li>
{{/each}}
I cann´t bind the NotesIndexController ( where i get the list of notes ) with the content of this view.
What is the correct way to do this ?
Assuming your main template is index you should be able to access your App.NotesIndexController content by requiring the nodesIndex controller with the needs API in your IndexController:
JS
App.IndexController = Em.ArrayController.extend
content: []
needs: ['notesIndex']
notesBinding: 'controllers.notesIndex.content'
Handlebars
<script type="text/x-handlebars" id="index">
...
{{view App.NotesListView contentBinding='notes'}}
...
</script>
If your main template is application you should be able to do the same but requiring your notesIndex controller on the ApplicationController instead:
JS
App.ApplicationController = Em.ArrayController.extend
content: []
needs: ['notesIndex']
notesBinding: 'controllers.notesIndex.content'
Handlebars
<script type="text/x-handlebars" id="application">
...
{{view App.NotesListView contentBinding='notes'}}
...
</script>
Edit in response to your last comment:
try rewrite the setupController hook in you NotesIndexRoute to this:
...
setupController:(controller, model) ->
#_super(controller, model)
controller.set('users', App.User.find())
...
Hope it helps.
I have an index route where I need to populate a menu in one outlet based on a list of models. However I cannot get the models to be represented in the each statement.
Here is the Category Model:
App.Category = DS.Model.extend({
title: DS.attr('string'),
parent: DS.belongsTo('App.Category')
})
And here is the indexRoute where I render it
App.IndexRoute = Em.Route.extend({
renderTemplate: function(){
this.render('index')
this.render('categoryMenu',
{
outlet: 'sidebar',
into: 'index',
model: function() {
return App.Category.find()
},
controller: App.CategoriesController
})
this.render('badgesList',{
outlet: 'badgesList',
into: 'index'
})
}
})
Index Template:
<script type="text/x-handlebars" data-template-name="index">
<div class="span3">
{{outlet sidebar}}
</div>
<div class="span8">
{{outlet badgesList}}
</div>
</script>
Nested Category Template
<script type="text/x-handlebars" data-template-name="categoryMenu">
<ul>
{{#each model}}
{{title}}
{{/each}}
</ul>
</script>
I have tried to change the each statement to several different things like controller or item in model but nothing is displayed.
Thank you for any help!
Make yourself CategoriesController first like this:
App.CategoriesController = Ember.ArrayController.extend({
content: function () {
return App.Category.find()
}.property()
});
rename your template just to categories
<script type="text/x-handlebars" data-template-name="categories">
<ul>
{{#each model}}
{{title}}
{{/each}}
</ul>
</script>
in your index template replace {{outlet}} with {{render 'categoies'}}
<script type="text/x-handlebars" data-template-name="index">
<div class="span3">
{{render 'categoies'}}
</div>
<div class="span8">
{{outlet badgesList}}
</div>
</script>
as last thing remove the call rendering categoryMenu.
I'm trying to use multiple named outlets with Ember.js. Is my approach below correct?
Markup:
<script type="text/x-handlebars" data-template-name="application">
<div id="mainArea">
{{outlet main_area}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="home">
<ul id="sections">
{{outlet sections}}
</ul>
<ul id="categories">
{{outlet categories}}
</ul>
</script>
<script type="text/x-handlebars" data-template-name="sections">
{{#each section in controller}}
<li><img {{bindAttr src="section.image"}}></li>
{{/each}}
</script>
<script type="text/x-handlebars" data-template-name="categories">
{{#each category in controller}}
<img {{bindAttr src="category.image"}}>
{{/each}}
</script>
JS Code:
Here I set the content of the various controllers to data grabbed from a server and connect outlets with their corresponding views. Since the HomeController has no content, set its content to an empty object - a hack to get the rid of this error message:
Uncaught Error: assertion failed: Cannot delegate set('categories'
) to the 'content' property of object
proxy : its 'content' is undefined.
App.Router = Ember.Router.extend({
enableLogging: false,
root: Ember.Route.extend({
index: Ember.Route.extend({
route: '/',
connectOutlets: function(router){
router.get('sectionsController').set('content',App.Section.find());
router.get('categoriesController').set('content', App.Category.find());
router.get('applicationController').connectOutlet('main_area', 'home');
router.get('homeController').connectOutlet('home', {});
router.get('homeController').connectOutlet('categories', 'categories');
router.get('homeController').connectOutlet('sections', 'sections');
}
})
})
});
If it's any help, I got this error because I was connecting to an Ember.ObjectController instead of Ember.Controller.
(edit: simplified things a bit below)
I have a handlebars template with an {{#if etc}} conditional, and when I change the associated data the view updates the first time, but then does not continue to update on subsequent changes. I am toggling a boolean that is in the condition, and I know the toggle is running and switching the property because I can watch it do so on the console, but the actual view, a I said, only refreshes once. In my html file this looks like this:
<script type="text/x-handlebars" data-template-name="application">
<body>
<div class="row">
{{#if App.Nav.show}}
{{outlet nav}}
{{/if}}
<div class="span10">
<h1>Hello</h1>
{{outlet}}
</div>
</div>
</body>
</script>
and a bit further on, to toggle:
<script type="text/x-handlebars" data-template-name="people">
<a {{action toggleMenu}}> toggle </a>
</script>
and in the javascript:
App.NavController = Ember.Controller.extend();
App.NavView = Ember.View.extend({
templateName: 'nav'
});
App.Nav = Ember.Object.create({
show: true
});
and finally the relevant bits of the router:
App.Router = Ember.Router.extend({
enableLogging: true,
root: Ember.Route.extend({
index: Ember.Route.extend({
route: '/',
showPerson: Ember.Route.transitionTo('aName'),
toggleMenu: function(){
console.log('Changing the toggle!');
App.Nav.toggleShow();
},
connectOutlets: function(router){
router.get('applicationController').connectOutlet('nav', 'nav');
router.get('applicationController').connectOutlet('allPeople', unrelated_function())
}
})
})
});
I would say to put your if into your view. Something like this:
<script type="text/x-handlebars" data-template-name="people">
<a {{action toggleMenu}}> toggle </a>
{{#if App.Nav.show}}
<div>navigation</div>
{{/if}}
<div class="span10">
<h1>Hello {{name}}</h1>
</div>
</script>
Then your application view should look something like this:
<script type="text/x-handlebars" data-template-name="application">
<body>
<div class="row">{{outlet}}</div>
</body>
</script>
Let me know if you tried it and it worked.
I did not use connectOutlet to display the view, let me know if there is some purpose behind using connectOutlet method, Meanwhile here is my implementation of toggling the view visibility