Ember - Saving sub-menu state - ember.js

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.

Related

Change DIV class on click action Ember

I want to change the DIV class base on CLICK action. I am trying to make a floating sidebar like this http://startbootstrap.com/templates/simple-sidebar.html
This demo has only three lines of code for toggle-ing the class.
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("active");
});
</script>
I want to achive same thing but in ember way. Below is my HTML code:
<div id="wrap">
<div class="pull-left" id="main_menu">
<ul class="list-group">
<li class="list-group-item">{{#link-to "selectImage"}}<h4>Choose Picture</h4>{{/link-to}}</li>
<li class="list-group-item">{{#link-to "message"}}<h4>Write Message</h4>{{/link-to}}</li>
<li class="list-group-item"><h4>Account info</h4></li>
<li class="list-group-item"><h4>Recent Orders</h4></li>
<li class="list-group-item"><h4>How to</h4></li>
<li class="list-group-item"><h4>FAQ</h4></li>
</ul>
</div>
<!-- Begin page content -->
<div class="container" id="page_content">
{{outlet}}
</div>
<!-- End page content -->
</div>
</script>
<script type="text/x-handlebars" id="cards/index">
<h1>
<button class="pull-left btn btn-default" data-target="#main_menu" {{action 'changeClass'}}>
<img src="images/icons/menu_tablet.png" class="main_menu"/>
</button>
</script>
Now I do not know how can I use the action to change the class in WRAP div. I will really appreciate any help regarding this issue.
You can add the action handler within the controller for cards/index
Controller = Ember.ObjectController.extend({
actions: {
changeClass: function() {
// Run logic here
}
}
})

Emberjs ,i dont know where take mistake

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.

How to remove the views while using the properties from the context of outerview in emberjs

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

Multiple Outlets on one page

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.

Ember view rendered at the bottom of the DOM

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>