I've got an unordered list using Bootstrap and Ember.js. Each list item is a link to display a new post, and whenever you click on the link, Ember adds the class active by default. I'm using Bootstrap nav-pills that turn blue when the class is active. However, Ember makes the link active whereas I'd like it to make the whole <li> active.
Here's my template:
<ul class="nav nav-pills nav-stacked">
{{#each post in controller}}
<li class="list-group-item">
{{#link-to 'post' post}}
{{post.title}}
{{/link-to}}
</li>
{{/each}}
</ul>
When you click on a link, the <li> looks like this:
<li class="list-group-item">
<a id="ember360" class="ember-view active" href="#/posts/1">
A great post
</a>
</li>
I know that it would be fairly trivial to add this functionality with jQuery, but is there a way to make the <li> active rather than the <a> with Ember or Handlebars directly? I tried putting the {{link-to}} around the <li> and that didn't do the trick.
You can change the link-to generated tag to <li> using tagName="li" option. And keep the <a> tag to just keep the bootstrap style:
<ul class="nav nav-pills nav-stacked">
{{#each post in controller}}
{{#link-to 'post' post tagName="li" class="list-group-item" }}
{{post.title}}
{{/link-to}}
{{/each}}
</ul>
See this in action http://jsfiddle.net/marciojunior/YLN5X/
I don't think there is any super easy way, I think the best way would be to extend the LinkView, and register a new helper, link-to-bootstrap, or something along those lines that added the class to the li element instead of the anchor element.
There is a really good project that already does this https://github.com/ember-addons/bootstrap-for-ember
There isn't a built-in way. The active class binding code is internal to link-to, and involves several not-easy-to-abstract pieces.
The best solution is to have the routes set the selected post in the postsController. This would look like:
setupController: function(controller, model) {
controller.set('model', model);
this.controllerFor('posts').set('selection', model);
},
Then you want to open the item controller for posts (PostController unless you set itemController to something different on PostsController) and do something like this:
selection: Ember.computed.alias("parentController.selection"),
isActive: Ember.computed.equal("model", "parentController.selection")
Then in your li:
<li {{bind-attr class="isActive:active :list-group-item"}}>
Related
I am trying to create a dashboard where dashboard is abstract state and subdashboard is the very next child state for the dashboard.
Here view details of users use to go to state dashboard.tables. But the problem is that, the html element li is not opening / getting active.
Though the state is changed, that particular element is not getting active which is under datatables
In the above image, I have done manually open to just illustrate my query.
That is click / change of any state should be get active in the side menu and show as active. Any help will be great
Here is my code,
<li class="has_sub">
<i class="md md-view-list"></i><span> Data Tables </span><span class="pull-right"><i class="md md-add"></i></span>
<ul class="list-unstyled">
<li ui-sref-active='{"active": "dashboard" }' ><a ui-sref="dashboard.tables">Tables</a></li>
</ul>
</li>
Here are my routes
r.state("dashboard",{abstract:"true",templateUrl:"partials/dashboard.html"})
r.state("dashboard.subdashboard",{url:"/dashboard",templateUrl:"partials/subdashboard.html"})
r.state("dashboard.tables",{url:"/tables",templateUrl:"partials/tables.html"});
Also as said by LouieAlmeda I have written, but as it wont work i removed it.
and also ng-class i have tested but no use
Can you try:
<li ui-sref-active='{"active": ".dashboard" }' ><a ui-sref="dashboard.tables">Tables</a></li>
I am using UI Router for navigating the menu. When I am clicking on second menu it's getting the active class but still the first menu is highlighted. I am providing my code below.
<ul class="nav navbar-nav">
<li ui-sref-active="active"><a ui-sref="product">Home</a></li>
<li ng-class="{'active': $state.includes('product.eVouchers')}" class="dropdown"><a ui-sref="product.eVouchers.dashboard" class="dropdown-toggle" data-toggle="dropdown">E-Vouchers <b class="caret"></b></a>
<ul class="dropdown-menu">
<li ui-sref-active="active"><a ui-sref="product.eVouchers.dashboard">Dashboard</a></li>
<li ui-sref-active="active"><a ui-sref="product.eVouchers.code">Generate Voucher Code</a></li>
<li ui-sref-active="active"><a ui-sref="product.eVouchers.list">E-Voucher List</a></li>
</ul>
</li>
</ul>
When I am navigating to the second menu (i.e-E-Vouchers), at the same time the first menu is getting highlight with second menu. But when I am in the first menu only the first menu is getting the active class. Here I need when user will navigate to the any menu that menu only will get the active class.
I am using ui-router #version v0.2.15.
It's because of
<li ng-class="{active:$state.includes('product')}">
you add the class yourself for the parent menu so why don't you use the ui-sref-active like for other menus?
ui-sref-active="active"
ui-sref-active can live on the same element as ui-sref or on a parent element. The first ui-sref-active found at the same level or above the ui-sref will be used.
ui-sref-active will activate when the ui-sref's target state or any child state is active. If you need to activate only when the ui-sref target state is active and not any of it's children, then you will use ui-sref-active-eq
I am trying to figure out how to detect what page I am on so I can add a selected class to my html with Jquery. I have tried a few bits of script but they have not worked. I am working on a local server and for now just need something that can somehow detect the page I am on and somehow link it to the li's. I'm not sure how to tackle it
HTML:
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li><img src="img/small-icons/access-icon.png" width="17" height="16" alt=""/>Access</li>
<li>Fader Layout</li>
<li>Patching</li>
<li>Wild Controls</li>
<li>Buses & Outputs</li>
<li class="submenu">Contribution
<ul class="sub-section">
<li class="go-back"><a>I AM BACK BUTTON for contribti</a></li>
<li><a>test</a></li>
<li><a>test</a></li>
</ul>
</li>
<li>Oscillator</li>
<li>Talkback</li>
<li>Meters</li>
<li>Automixer</li>
<li>Audio Follow Video</li>
</li>
<li class="submenu selected">test-page
<ul class="sub-section">
<li class="go-back"><a>Back to Main Menu</a></li>
<li><a>IwhatN</a></li>
<li><a>IwhatN</a></li>
</ul>
</li>
<li class="submenu">Control Surface
<ul class="sub-section">
<li class="go-back"><a>Back to Main Menu</a></li>
<li><a>IwhatN</a></li>
<li><a>IwhatN</a></li>
</ul>
</li>
</ul>
</div>
A solution would be to use get params with something like How to get query string params and form the URL's so that they append the param as ?page=mypage and then get the page name or ID with getParameterByName('page') and then check out where you handle your tabs and perform your desired stylings/actions.
This can also be handled from backend, depending on the backend technology you are using.
For example
if PHP, perhaps append the get params there or set specific $_SESSION['page'] variable and handle these clientside
if Django, it can be exported to context or, also appended to get params and handled in the template via javascript or template tags
...and many other possibilities.
If the question though refers to how to set a status based on what page you are on depends on where you want to set that status, for example you might write a script that when clicking a button/link it would first make an ajax POST request to your server sending the ID that you are interested in (setting it in the backend somewhere) and then redirect to wherever you need.
I want to re-render all the views present on my page.I have Header, Footer and Body view. In Header view i have a dropDown in which user can select the Language Preference. On clicking on language prefrence all the view should be re-render. Is it Possible in Angular?
In BackboneJs i simply call the render function again on that particular event. Is there some same kind of functionality provided by AngularJs?
Thanks in Advance
Header Template (language Prefrence Dropdown Code)
<li class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" data-target="#">
Language Preferences<b class="caret"></b>
</a>
<ul class="dropdown-menu dropdown-manual">
<li id="English" ng-click="englishConversion()">English</li>
<li id="French" ng-click="frenchConversion()" >French</li>
</ul>
</li>
is there any inbuilt function which i can call in englishConversion and frenchConversion to re-render the view/views?
Have you looked at the angular-getText libary ,
Or you can $compile the HTML using angular again. You can simply do like this,
var content=angular.element('#translatedContent');
var scope=content.scope();
$compile(content.contents())(scope));
I am having issues getting a dropdown to be bound properly in an ember js app because I have action handlers on click inside of the list and the foundation events are conflicting.
Template name:
<a data-dropdown="groupDrop" id="groupDropdownLink" class="button radius tiny success dropdown">
Move Selected To Group ({{selectedCount}})
</a>
<br>
<ul id="groupDrop" data-dropdown-content class="f-dropdown">
{{#each eventGroups}}
<li {{action 'moveToGroup' this}}><a>{{name}}</a></li>
{{/each}}
</ul>
When I run $(document).foundation() it overrides the action handlers, and when I remove that it doesn't trigger the dropdown.
What I think I need to do is add some action handler to the a tag and then have it open up the dropdown, so I can not use the foundation handlers.
The function you need to use to trigger the dropdown is Foundation.libs.dropdown.toggle
You pass in a jQuery object of the dropdown link to toggle it
You can solve it like this:
template:
<a data-dropdown="groupDrop" {{action 'showDropdown'}} id="groupDropdownLink" class="button radius tiny success dropdown">
Move Selected To Group ({{selectedCount}})
</a>
<br>
<ul id="groupDrop" data-dropdown-content class="f-dropdown">
{{#each eventGroups}}
<li {{action 'moveToGroup' this}}><a>{{name}}</a></li>
{{/each}}
</ul>
controller:
Ea.GroupGuestsController = Em.ArrayController.extend
actions:
showDropdown: ->
Foundation.libs.dropdown.toggle($('#groupDropdownLink'))