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.
Related
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
I have a sub menu that appears only when a menu item in the main menu is selected. What I want to do is save the state of the sub menu so that, when a user selects something in the sub menu, then navigates away in the main menu, that sub menu item should still be selected when they return to the sub menu. But, I'm not sure how to go about it. Any ideas?
http://jsfiddle.net/martinp999/Ce5j8/2/
<script type="text/x-handlebars">
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#/a/f">Main Menu</a>
<ul class="nav">
<li>{{#link-to 'a'}}A{{/link-to}}</li>
<li>{{#link-to 'b'}}B{{/link-to}}</li>
<li>{{#link-to 'c'}}C{{/link-to}}</li>
</ul>
</div>
</div>
{{outlet}}
</script>
<script type="text/x-handlebars" id="a">
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#/a/f">Sub Menu A</a>
<ul class="nav">
<li>{{#link-to 'f'}}F{{/link-to}}</li>
<li>{{#link-to 'g'}}G{{/link-to}}</li>
<li>{{#link-to 'h'}}H{{/link-to}}</li>
</ul>
</div>
</div>
{{outlet}}
</script>
<script type="text/x-handlebars" id="b">
B
</script>
<script type="text/x-handlebars" id="c">
C
</script>
<script type="text/x-handlebars" id="f">
F
</script>
<script type="text/x-handlebars" id="g">
G
</script>
<script type="text/x-handlebars" id="h">
H
</script>
App.Router.map(function () {
this.resource('a', function() {
this.resource('f');
this.resource('g');
this.resource('h');
});
this.resource('b');
this.resource('c');});
When transitioning from the A route, you can inspect the transition object and see where you're going. It is possible to stash the location where you're going (if it is a sub-route of A) and then utilize it again in the redirect hook of the AIndexRoute.
Check out this updated fiddle: http://jsfiddle.net/ahaurw01/Ce5j8/3/
Figured it out. I thought that ember-latest.js pointed at latest production release, it actually points at the beta of beta - canary. The transition object does not contain a handlerInfos object in prod or in beta, only in canary.
0 release!
I am having a weird problem rendering CSS under Ember.js. It is weird because the just works fine after manually refreshing the page, and in plain HTML without Ember. I have tried different browsers and different CSS libraries and all the same.
I just want to render tabs inside a handlebars template, I have tried both Zurb Foundation sections and jQuery-ui tabs and both work only after manual page refresh.
I have tried to reproduce the problem with JSBin but it didn't work. I am using the example code from both libraries to do this.
Here is my HTML with Zurb Foundation 4.3: (referencing js and css libraries omitted for brevity)
<html>
<body>
<script type="text/x-handlebars">
<nav class="top-bar" data-options="is_hover=false">
<ul class="title-area">
<li class="name">
<h1>Main</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<ul class="left show-on-small">
<li>{{#linkTo 'families'}}Families{{/linkTo}}</li>
</ul>
<ul class="left">
<li>{{#linkTo 'charities'}}Charities{{/linkTo}}</li>
</ul>
</section>
</nav>
<div>
{{outlet}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="families">
<div class="row display">
<div class="large-3 columns">
<span>{{#linkTo 'families.details'}}list{{/linkTo}}</span>
</div>
<div class="large-9 columns">
{{outlet}}
</div>
</div>
</script>
<script type="text/x-handlebars" data-template-name="families/details">
<div class="row">
<span>details</span>
</div>
<div class="row">
<section class="section-container auto" data-section data-section-small-style>
<section class="active" >
<p class="title" data-section-title>Family Info</p>
<div class="content" id="panel1" data-section-content>
<span>Family Info goes here</span>
</div>
</section>
<section>
<p class="title" data-section-title>Members</p>
<div class="content" data-slug="panel2" data-section-content>
<span>Family members list goes here</span>
</div>
</section>
</section>
</div>
</script>
</body>
</html>
My Javascript:
App = Em.Application.create();
App.Router.map(function() {
this.resource('families', function() {
this.route('details');
});
this.resource('charities');
});
Just wanted to know if there are any known issues or caveats between Ember/handlebars and CSS.
Thank you.
EDIT: Got a sample running at http://jsbin.com/iTOsof/3 but does not work after refresh like local host
I am guessing the reason it's not working is because Foundations JavaScript handler is being run when the DOM fires its ready event, at that point Ember haven't rendered its templates so there's nothing to tie the tabs to.
What you could try to do is to add $(document).foundation(); to the DetailsViews didInsertElement.
App.DetailsView = Ember.View.extend({
didInsertElement: function() {
$(document).foundation('section'); // this will only load the section component
}
});
One issue though, since Foundation's JavaScript components are not compatible with Ember you will most likely run into problems when Foundation appends their location hash for the selected section since Ember is using the same method to handle its routing.
You can change Embers location method to a modern variant by specifying:
App.Router.reopen({
location: 'history'
});
This will however not be compatible with IE 9 and below.
Another alternative is to use Bootstrap as an alternative to Foundation (personally I prefer Foundation over Bootstrap but in this case it may be worth it if you don't want to create your own components in Ember), and then use the Ember Components made available for Bootstrap, http://ember-addons.github.io/bootstrap-for-ember/dist/#/show_components/tabs-panes
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 have a scenerio in which i wanted to render some properties in the child view with the properties of the parent view but on the basis of some properties. But when the properties evaluates to false the view should be destroyed but its giving error as:
cannot call unchain of undefined and some errors also related to this.
code:
Template
<script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="address">
{{item.Address.addressline1}}<br />
{{item.Address.addressLine2}}<br />
{{item.Address.city}}, {{item.Address.state}}<br />
</script>
<script type="text/x-handlebars" data-template-name="index">
{{#if addressVisible}}
<button {{action hideAddress}}> Hide Address </button>
{{else}}
<button {{action showAddress}}>Show Address</button>
{{/if}}
<ul>
{{#each item in model}}
<li>
{{item.name}}<br />
{{#if addressVisible}}
{{view App.AddressView}}
{{/if}}
</li>
{{/each}}
</ul>
</script>
I have created a fiddle to show my issue:
http://jsbin.com/inoroj/5/edit
When we click on showAddress it shows all the address views but when clicked on hide all views should hide, but instead it raises unchain error.
It looks like for some reason Ember did not like your property being capitalized. By changing Address to address the app worked as expected. I made a few other small changes as well.
http://jsbin.com/uquyuv/1/edit