<script type="text/x-handlebars" data-template-name="application">
{{view App.UiMenuView}}
{{view App.UiMainContainerView}}
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="uiMainContainer">
<div id="uiMainContainer">
<div id="uiMainContainerSidebar">
{{#view App.SidebarView}}
<ul id="uiMainContainerSidebarList">
<li><a {{bindAttr href="view.tasksUrl"}}>Tasks</a></li>
<li><a {{bindAttr href="view.milestonesUrl"}}>Milestones</a></li>
<li><a {{bindAttr href="view.projectsUrl"}}>Projects</a></li>
<li><a {{bindAttr href="view.customersUrl"}}>Customers</a></li>
</ul>
{{/view}}
</div>
<div id="uiMainContainerContainer">{{outlet}}</div>
</div>
</script>
I am wondering if there's a way to address the specifically the outlet from uiMainContainer? I tried something like:
test: Em.Route.extend({
route: '/test',
connectOutlets: function(router) {
//router.get('applicationController').connectOutlet({ name: 'test' });
router.get('uiMainContainerController').connectOutlet({ name: 'test'});
}
})
This approach, however, seems to do nothing.
Related
This works fine:
<div class='collapse navbar-collapse' id='main-nav-collapse'>
<ul class='nav navbar-nav'>
{{#link-to 'index' tagName='li' activeClass='active'}}
{{#link-to 'index'}}Home{{/link-to}}
{{/link-to}}
</ul>
</div>
But when I add in another tab below, and restart the server nothing shows at all..
<div class='collapse navbar-collapse' id='main-nav-collapse'>
<ul class='nav navbar-nav'>
{{#link-to 'index' tagName='li' activeClass='active'}}
{{#link-to 'index'}}Home{{/link-to}}
{{/link-to}}
{{#link-to 'orders' tagName='li' activeClass='active'}}
{{#link-to 'orders'}}Orders{{/link-to}}
{{/link-to}}
</ul>
</div>
Orders is "orders.hbs" and is just a static html page.. and in my routers.js.coffee file is the following route:
Dashboard.Router.map ()->
#resource('orders')
I have this issue trying to use an ember partial and an action that targets the view
...
<li class="buttonsList-item-horizontal btn btn-lg btn-secondary" {{action restore this target='view'}}>
<i class="fa fa-refresh"></i>
<span class="btn-text">Restore</span>
</li>
...
If I use this code inside a partial is not working if I use it directly in the template it works.
Any ideas or suggestions to accomplish the same result?
the template is
...
<ul class="list">
<li class="list-item list-item-separator">{{group.key}}</li>
{{#each content}}
{{partial 'templateElement'}}
{{/each}}
</ul>
...
Assuming you are talking about the view, and not the template which you called the view above you have the logic correct.
App.IndexView = Em.View.extend({
actions:{
blah:function(){
console.log('asdf');
}
}
});
<script type="text/x-handlebars" data-template-name="index">
<ul>
{{#each item in model}}
<li>{{partial 'foo'}}</li>
{{/each}}
</ul>
</script>
<script type="text/x-handlebars" data-template-name="foo">
<button {{action 'blah' target='view'}}>{{item}}</button>
</script>
http://emberjs.jsbin.com/hocanilu/1/edit
For some reason, I can't call my helper in my template. It throws an error saying that my helper is undefined.
I've got the following code :
<script type="text/x-handlebars" id="catalog">
<div class="col-md-10">
<ul class="list-group">
{{#each catalog.catalog_categories}}
{{categoryHelper this}} // This works !!!
{{/each}}
</ul>
</div>
</script>
<script id="categories-template" data-template-name='test' type="text/x-handlebars-template">
<a data-toggle="collapse" href=".collapse{{ category.category_id }}" data-target=".child{{ category.category_id }}">
<li class="list-group-item">
{{ category.category_name_fr_sh }} // French name of category
</li>
</a>
{{#if category.category_children}}
{{#each category.category_children}}
{{categoryHelper this}} // This throw error saying that the helper is undefined
{{/each}}
{{/if}}
</script>
//app.js
Ember.Handlebars.helper('categoryHelper', function(category) {
var template = Handlebars.compile($('script#categories-template').html());
return new Handlebars.SafeString(template({category: category}));
});
EDIT:
Here's a jsfiddle
http://jsfiddle.net/CycS8/
When ember bootstrap, it will look for all templates with the selector script[type="text/x-handlebars"], script[type="text/x-raw-handlebars"], and for each template it will compile with the appropriate compiler engine:
Ember.Handlebars.compile for scripts with type="text/x-handlebars and Handlebars.compile for type="text/x-raw-handlebars.
After the compilation the script tag is removed from the dom.
Probally the $('script#categories-template').html() in your helper is returning nothing. Because the template isn't in the dom.
I think that the following could work:
templates
<script type="text/x-handlebars" id="catalog">
<div class="col-md-10">
<ul class="list-group">
{{#each catalog.catalog_categories}}
{{categoryHelper this}}
{{/each}}
</ul>
</div>
</script>
<script id="categories-template" type="text/x-raw-handlebars">
<a data-toggle="collapse" href=".collapse{{ category.category_id }}" data-target=".child{{ category.category_id }}">
<li class="list-group-item">
{{ category.category_name_fr_sh }} // French name of category
</li>
</a>
{{#each category.category_children}}
{{categoryHelper this}}
{{/each}}
</script>
app.js
Ember.Handlebars.helper('categoryHelper', function(category) {
var template = Ember.TEMPLATES['categories-template'];
return new Handlebars.SafeString(template({category: category}));
});
UPDATE
Ember provide the render view helper, I think that you can get this working using the following:
<script id="catalog" type="text/x-handlebars">
<div class="col-md-10">
<ul class="list-group">
{{#each catalog.catalog_categories}}
{{render "categories-template" this}}
{{/each}}
</ul>
</div>
</script>
<script id="categories-template" type="text/x-handlebars">
<a data-toggle="collapse" href=".collapse{{ category.category_id }}" data-target=".child{{ category.category_id }}">
<li class="list-group-item">
{{ category.category_name_fr_sh }} // French name of category
</li>
</a>
{{#each category.category_children}}
{{render "categories-template" this}}
{{/each}}
</script>
Your type is wrong, it should be type="text/x-handlebars" in your test template.
im busy working through the getting started guide
currently at this point
http://emberjs.com/guides/getting-started/displaying-model-data/
i have a handlebars template
<script type="text/x-handlebars" data-template-name="todos">
<section id="todoapp">
<header id="header">
<h1>todos</h1>
<input type="text" id="new-todo" placeholder="What needs to be done?" />
</header>
<section id="main">
<ul id="todo-list">
<li class="completed">
<input type="checkbox" class="toggle">
<label>Learn Ember.js</label><button class="destroy"></button>
</li>
<li>
<input type="checkbox" class="toggle">
<label>...</label><button class="destroy"></button>
</li>
<li>
<input type="checkbox" class="toggle">
<label>Profit!</label><button class="destroy"></button>
</li>
</ul>
<input type="checkbox" id="toggle-all">
</section>
<footer id="footer">
<span id="todo-count">
<strong>2</strong> todos left
</span>
<ul id="filters">
<li>
All
</li>
<li>
Active
</li>
<li>
Completed
</li>
</ul>
<button id="clear-completed">
Clear completed (1)
</button>
</footer>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
</footer>
</script>
but when i replace this static html with
<script type="text/x-handlebars" data-template-name="todos">
<section id="todoapp">
<header id="header">
<h1>todos</h1>
<input type="text" id="new-todo" placeholder="What needs to be done?" />
</header>
<section id="main">
<ul id="todo-list">
{{#each}}
<li>
<input type="checkbox" class="toggle">
<label>{{title}}</label><button class="destroy"></button>
</li>
{{/each}}
</ul>
<input type="checkbox" id="toggle-all">
</section>
<footer id="footer">
<span id="todo-count">
<strong>2</strong> todos left
</span>
<ul id="filters">
<li>
All
</li>
<li>
Active
</li>
<li>
Completed
</li>
</ul>
<button id="clear-completed">
Clear completed (1)
</button>
</footer>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
</footer>
</script>
the ember application doesn't load. ember inspector says there is no application. and no errors are displayed in the console. when i revert to the static code it fixes
JS Code
var Todos = Ember.Application.create();
Todos.ApplicationAdapter = DS.FixtureAdapter.extend();
Todos.Router.map(function () {
this.resource('todos', { path: '/' });
});
Todos.TodosRoute = Ember.Route.extend({
model: function () {
return this.store.find('todo');
}
});
Todos.Todo = DS.Model.extend({
title: DS.attr('string'),
isCompleted: DS.attr('boolean')
});
Todos.Todo.FIXTURES = [
{
id: 1,
title: 'Learn Ember.js',
isCompleted: true
},
{
id: 2,
title: '...',
isCompleted: false
},
{
id: 3,
title: 'Profit!',
isCompleted: false
}
];
script tags
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="http://builds.emberjs.com.s3.amazonaws.com/handlebars-1.0.0-rc.3.js"></script>
<script type="text/javascript" src="http://builds.emberjs.com.s3.amazonaws.com/ember-latest.js"></script>
<script type="text/javascript" src="http://builds.emberjs.com.s3.amazonaws.com/ember-data-latest.js"></script>
Update your dependencies to:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/release/ember.js"></script>
<script src="http://builds.emberjs.com/beta/ember-data.js"></script>
and everything should work.
Here I've pasted your code into a jsbin and it loads correctly: http://jsbin.com/EdUnOKi/2/edit
Hope it helps.
I use the following template to display a table of all users.
<script type="text/x-handlebars" data-template-name="users">
<table>
{{#each model itemController="user"}}
<tr>
<td>{{lastName}}</td>
<td>
{{#if isNew}}
<button {{action 'save' this}} class="btn btn-small">Save</button>
<button {{action 'discard' this}} class="btn btn-small">Discard</button>
{{else}}
{{#linkTo 'user.edit' this activeClass="disabled" classNames="btn btn-small"}}Edit{{/linkTo}}
{{/if}}
</td>
</tr>
{{/each}}
</table>
{{#unless newUserCreate}}
<p>
{{#linkTo 'users.new' classNames="btn btn-small"}}Create a new user{{/linkTo}}
</p>
{{/unless}}
</script>
Below the table I use a {{#unless newUserCreate}} which I'd like to use within the table too but because of a different scope I can't. How can I fix the following snippet to get it working? The User doesn't have a newUserCreate. Only the Users has.
{{#if isNew}}
{{#unless newUserCreate}}
<button {{action 'save' this}} class="btn btn-small">Save</button>
<button {{action 'discard' this}} class="btn btn-small">Discard</button>
{{/unless}}
{{else}}
{{#linkTo 'user.edit' this activeClass="disabled" classNames="btn btn-small"}}Edit{{/linkTo}}
{{/if}}
app.js
App.UsersRoute = Ember.Route.extend({
model: function() {
return App.User.find();
}
});
App.UsersNewRoute = Ember.Route.extend({
model: function() {
return App.User.createRecord();
},
renderTemplate: function() {
this.render({ into: 'users' });
},
activate: function() {
this.controllerFor('users').set('newUserCreate', true);
},
deactivate: function() {
this.controllerFor('users').set('newUserCreate', false);
}
});