Say I had a template that was like:
<script type="text/x-handlebars" id="something">
<div class="thisIsJustAnExample">Something I wanted in the template</div>
{{outlet}}
<div class="thisIsJustAnotherExample">Something else I wanted in the template</div>
</script>
And do the following in another template:
<script type="text/x-handlebars" id="thisThingPutsSomethingInSomething">
<span>
{{#partial "something"}}
<div>Some stuff I want to go into the outlet...</div>
{{/partial}}
</span>
</script>
So the result is:
<div class="thisIsJustAnExample">Something I wanted in the template</div>
<div>Some stuff I want to go into the outlet...</div>
<div class="thisIsJustAnotherExample">Something else I wanted in the template</div>
Is this possible?
Using a view this can be easily accomplished:
Parent Template and View
<script type="text/x-handlebars" data-template-name="foo">
hello {{yield}} world
</script>
App.FooView = Em.View.extend({
layoutName:'foo'
});
Usage
{{#view App.FooView}}
{{item}}
{{/view}}
Example
http://emberjs.jsbin.com/deluxaha/1/edit
Just load the {{partial}} at the place of your {{outlet}}. You can achieve the final output.
Jsbin - Link
Note: Your partial template-name should begin with a "_" refer the link - Partial_naming_convention
Related
first,i can watch the data in blogs template.
<script type="text/x-handlebars" id="blogs">
<div>
<div>
{{#linkTo 'blogs' }}bogsCategory{{/linkTo}}
</div>
<ul>
{{#each controller}}
<li>{{title}}</li>
{{/each}}
</ul>
</div>
</script>
then , build a new template "blogs/index" , to render into the blogs, but now, there nothing on my page.
<script type="text/x-handlebars" id="blogs/index">
<ul>
{{#each controller}}
<li>{{title}}</li>
{{/each}}
</ul>
</script>
<script type="text/x-handlebars" id="blogs">
<div>
<div>
{{#linkTo 'blogs' }}bogsCategory{{/linkTo}}
</div>
{{ outlet }}
</div>
</script>
i don't know where take mistake and how to do
Route:
App.Router.map(function(){
this.resource('blogs', { path: '/'});
});
App.BlogsIndexRoute=Em.Route.extend({
model: function(){
return App.Blog.find();
}
});
enter link description here
<----------------------------------------------------------------------------------------->
i want build a blog pag, the left is blogscategory, right is blog list, when i first into page, use 'blogs/index' to Initialization 'blogs', when click the blogscategory the blogs content will change by the category.
Have a look here at your working jsbin.
Basically I've changed BlogsIndexRoute to BlogsRoute and renamed the blogs template to application. Now it correctly renders the blogs/index template into the application template. I hope this is what you where trying to achieve.
Hope it helps.
I want to be able to only display a sidebar on some of my routes. How can I achieve something like this:
<div class="container">
<div id="ember-app">
<script type="text/x-handlebars">
// if currentRoute == /something, then show this:
<div class="row">
{{partial sidebar}}
<div class="span9 offset3 user-feed">
{{outlet}}
</div>
</div>
// else, show this:
{{outlet}}
// endif
</script>
</div>
</div>
<script type="text/x-handlebars" data-template-name="_sidebar">
// Sidebar code here ...
</script>
So when I visit /#/something I should see the sidebar, but on all other routes, I shouldn't.
You can observe the currentPath property to match the current route with Regex.
App.ApplicationController = Ember.Controller.extend({
showSidebar: function(){
var routes_array = ['two','four'],
currentPath = this.get('currentPath'),
filteredArray, showSideBar = false;
routes_array.forEach(function(itm){
var tab = new RegExp('^'+itm+'*');
if(!Em.isEmpty(currentPath.match(tab)))
showSideBar = true;
});
return showSideBar;
}.property('currentPath')
});
Just a simple try Here
A simple fix may be to use the partials argument with quotes?
{{partial 'sidebar'}}
I'm trying to put together an application using Ember.js
Find the jsfiddle here: http://jsfiddle.net/wprk14/ARbMa/
I think I have the routing / pages / templates working but I can't get my navigation to show up. I think I need to add another outlet for navigation but the documentation isn't really helping me understand what I need to do.
Relevant HTML
<div id="wrapper">
<div id="main-content">
<script type="text/x-handlebars">
{{outlet}}
</script>
</div>
</div>
<footer>
{{outlet nav}}
</footer>
<script type="text/x-handlebars" data-template-name="nav">
<ul id="tab-bar">
<li>{{#linkTo "messages.inbound"}}Inbox{{/linkTo}}</li>
<li>{{#linkTo "messages.outbound"}}Sentbox{{/linkTo}}</li>
<li>{{#linkTo "parking"}}Parking{{/linkTo}}</li>
<li>{{#linkTo "fuel"}}Fuel Tracker{{/linkTo}}</li>
</ul>
</script>
Relevant JS
App.Router.map(function() {
this.route("login");
this.resource('messages', function() {
this.route('inbound');
this.route('outbound');
});
this.route("parking");
this.route("fuel", { path: '/fuel-tracker' });
});
You should add {{render nav}} instead of {{outlet nav}} to render the navigation bar on all the pages, regardless of what is inside the current outlet.
I am using Ember and my view is getting rendered at the very bottom of my HTML DOM, instead of inside my div element.
Here is my source code :
index.html :
<body>
<div id="test">
<script type="text/x-handlebars">
{{view Skills.RecommendedSkillsListView}}
</script>
</div>
<script type="text/x-handlebars" data-template-name="recommended_skills_list">
<a href="#" {{action "b"}}>DO A NEW THING</a>
</script>
<script src="js/libs/jquery-1.8.3.min.js"></script>
<script src="js/libs/handlebars-1.0.rc.1.js"></script>
<script src="js/libs/ember-1.0.0-pre.2.js"></script>
<script src="js/app.js"></script>
</body>
app.js :
Skills = Ember.Application.create({});
Skills.RecommendedSkillsListView = Ember.View.extend({
templateName: 'recommended_skills_list',
b: function(v) {
alert('new hello');
}
});
Skills.initialize();
The rendered document :
<body class="ember-application">
<div id="test"></div>
<script src="js/libs/jquery-1.8.3.min.js"></script>
<script src="js/libs/handlebars-1.0.rc.1.js"></script>
<script src="js/libs/ember-1.0.0-pre.2.js"></script>
<script src="js/app.js"></script>
<div id="ember135" class="ember-view">
<div id="ember140" class="ember-view">
DO A NEW THING
</div>
</div>
</body>
Note: when using the same code with a previous version of ember (0.9.5) it works as expected
Ah, it looks like it is 'appending your view' to the body which you have given the 'application' template name which Ember will look for. Why not try putting a div inside the body and then referencing this in the Ember.Application.create();?
Ember.Router
Skills = Ember.Application.create({
rootElement: '#test'
});
View
<body>
<div id="test"></div>
<script src="js/libs/jquery-1.8.3.min.js"></script>
<script src="js/libs/handlebars-1.0.rc.1.js"></script>
<script src="js/libs/ember-1.0.0-pre.2.js"></script>
<script src="js/app.js"></script>
<div id="ember135" class="ember-view">
<div id="ember140" class="ember-view">
DO A NEW THING
</div>
</div>
</body>
Let me know if I've missed the point ;)
You need to specify the element to render your application to using the rootElement (docs here, related question: Emberjs rootElement) property of your application:
Skills = Ember.Application.create({
rootElement: "#test"
});
Here is a working example: jsfiddle example
Rendered output from example:
<body>
<div id="test" class="ember-application">
<div id="ember135" class="ember-view">
<div id="ember140" class="ember-view">
DO A NEW THING
</div>
</div>
</div>
</body>
Edit: Question rescinded. CollectionViews, as a subclass of ContentViews, do not respect layout, frustrating as that is.
CollectionViews don't seem to work with layouts. For example:
Test case: http://jsfiddle.net/73sWp/
Templates:
<script type="text/x-handlebars" data-template-name="layoutTest">
<div class="my-collection">
<h1>{{title}}</h1>
{{yield}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="layoutTest-child">
<div class="an-item">
Hi there.
</div>
</script>
Script:
var TestView = Ember.CollectionView.extend({
layoutName: "layoutTest",
title: "My Collection",
childViews: [
Ember.View.create({
templateName: 'layoutTest-child'
}),
Ember.View.create({
templateName: 'layoutTest-child'
})
]
});
$(function () {
TestView.create().appendTo(document.body);
});
Expected:
<div class="my-collection">
<h1>My Collection</h1>
<div class="an-item">
Hi there.
</div>
<div class="an-item">
Hi there.
</div>
</div>
Actual:
<div class="an-item">
Hi there.
</div>
<div class="an-item">
Hi there.
</div>
Am I missing something obvious?
Layouts are template based and CollectionViews have been intended to be used without templates.
This issue has been discussed a bit and I think the consensus is that we'd like to support using layouts with ContainerViews.
A pull request has been submitted that adds this functionality: https://github.com/emberjs/ember.js/pull/928