I have a menu bar whose status/color etc changes when clicked. These belong to different JSP/HTML pages. When I click on the page, there is a handlebar #bindAttr which decides the class of the each tabbed menuitem. For e.g.
<li id="index" {{#bindAttr class="active"}}>
<a href="./index.jsp">
<i class="icon-dashboard"></i>
<span>Dashboard</span>
</a>
</li>
What I need here is also to pass something else so that the computed property can find out based on the location.href whether this class should be true. Is there any way to pass the id of the "li" tag to the computed property "active"
Solved it. Custom HandleBar Helper Function
<li {{activetab "index.jsp"}}>
Handlebars.registerHelper("activetab", function(tabname) {
var currentPage = window.location.href; console.log(currentPage); if(currentPage.indexOf(tabname)!=-1){
return "class=active";
}
else{
return "";
}
});
Related
I have created a dialog box using the ember-modal-dialog. The content that is going to displayed in the dialog is received from the server. I am able to make the call to server and fetch the data. But I don't know how to save the data into my model store from actions.
Controller.js
actions:{
fiModal1: function(photo){
Ember.$('body').addClass('centered-modal-showing');
var currentState = this;
photo.toggleProperty('fidialogShowing'))
console.log('opendialog');
raw({
url: 'http://example.co.in/api/photo/'+photo.get('like_pk')+'/likes/',
type: 'GET',
}).then(function(result){
currentState.set('model.feed.liker',result)
});
},
bookmarked:function(liker){
liker.set('is_bookmarked',true)
},
}
feed.hbs
<p {{action "fiModal" photo }}>
{{photo.0.numlikes}}
</p>
{{#if photo.fidialogShowing}}
{{#modal-dialog translucentOverlay=true close = (action "fiDialogClose" photo)}}
{{#each model.feed.liker as |liker}}
<div class = "col-sm-6">
{{#if liker.is_bookmarked}}
<a href {{action "unbookmarked" liker}}>
<img class="foll" src = "images/button-bookmark-secondary-state-dark-b-g.png">
</a>
{{else}}
<a href {{action "bookmarked" liker}}>
<img class="foll" src = "images/button-bookmark.png">
</a>
{{/if}}
</div>
{{/each}}
Now the problem is that when action inside the dialog box is fired it throws an error:
fiver.set is not function
I think that the problem is occurring because I am not saving the result in the model store. How should I do it so the action inside the dialog box also works?
You can just encapsulate the results from your server into Ember.Object
Ember.Object.create(json)
For exemple replace your line
currentState.set('model.feed.liker',result)
by
currentState.set('model.feed.liker', result.map(function(item) {
return Ember.Object.create(item);
})
that way each elements inside your model.feed.liker should have a method 'set' available.
I am using this example ( https://gist.github.com/tcjr/6935684 ) to implement server-side pagination in an Ember.js app. Using that example, Router places metadata about the pagination on the results content array directly.
At the template layer the code looks like this:
<tfoot>
<tr>
<td>
<ul class="pagination pagination-sm">
<li><a {{action 'firstPage'}}><<</a></li>
<li><a {{action 'previousPage'}}><</a></li>
<li class="disabled"><a>{{ content.pagination.current_page }} of {{ content.pagination.total_pages }}</a></li>
<li><a {{action 'nextPage'}}>></a></li>
<li><a {{action 'lastPage'}}>>></a></li>
</ul>
</td>
</tr>
</tfoot>
What I want to do is have a conditional so that if, for example, I'm on the first page the first two links are hidden. E.g. (using my latest helper attempt)
{{#ifGT content.pagination.current_page 1}}
<li><a {{action 'firstPage'}}><<</a></li>
<li><a {{action 'previousPage'}}><</a></li>
{{/ifGT}}
But this doesn't work. Efforts to create a helper either return the string (i.e. the string 'content.pagination.current_page' > 1) or, if using registerBoundHelper, gives me the error: registerBoundHelper-generated helpers do not support use with Handlebars blocks..
// currently this fails with:
// registerBoundHelper-generated helpers do not support use with Handlebars blocks.
Ember.Handlebars.registerBoundHelper('ifGT', function(val1, val2, options) {
console.log(val1);
console.log(val2);
if(val1 > val2) {
return options.fn(this);
}
return options.inverse(this);
});
If a helper won't work (and maybe I'm just doing it wrong) how do I get access to the value of content.pagination.current_page from within the controller or route so that I can create a normal bound value use the normal Handlebars if block?
I would declare various properties in the controller/component (or a mixin), for example:
isFirstPage: Ember.computed.equal('page', 1);
isFirstPageLinkEnabled: Ember.computed.not('isFirstPage');
To get this to work I ended up using the setupController function on the Route like this:
setupController: function (controller, model) {
this._super(controller, model);
var pagination = model.get('pagination');
var page = pagination.current_page;
var total_pages = pagination.total_pages;
controller.set('isFirstPage', page === 1);
controller.set('isLastPage', page >= total_pages);
},
Once it was set up, I was able to reference the controller properties like normal.
Template:
{{#each document in documents}}
<div class="col-md-6" {{action "selectDocument" document}}>{{view Ember.Checkbox checked=document.isSelected}} {{document.name}}</div>
{{/each}}
Controller:
App.IndexDocumentsController = Ember.ArrayController.extend({
actions: {
selectDocument: function(document){
document.set('isSelected', !document.get('isSelected'));
}
}
});
When I click on the div, the checkbox toggles 'checked' property. But when I click on the ckeckbox - nothing happens. What can be the reason?
UPDATED
Link to jsbin: http://emberjs.jsbin.com/nuvocumuteto/1/edit?html,css,js,output
The issue is that when you click on the checkbox 2 things happen.
the checkbox toggles the isActive property, then
the selectRow action is ran which again toggles the isActive property
So the isActive property ends up staying in the same state that it was.
In your case I would get rid of the action, wrap the checkbox in a <label> and set the label to display: block.
The template would look like
<script type="text/x-handlebars" data-template-name="index">
<ul>
{{#each item in model}}
<li {{bind-attr class="item.isActive:active"}}><label>{{input type="checkbox" checked=item.isActive}}{{item.name}}</label></li>
{{/each}}
</ul>
</script>
and the css would look like
label {
display: block;
}
you would then be able to get rid of the selectRow action completely because clicking on the label will trigger the checkbox.
You can see a working bin here: http://emberjs.jsbin.com/nuvocumuteto/3/edit
I would argue that you are not following "The Ember Way" in two different ways here.
First, Ember.Checkbox is an internal Ember class (http://emberjs.com/api/classes/Ember.Checkbox.html). The recommended way to render a checkbox is to use the Handlebars input helpers (http://emberjs.com/guides/templates/input-helpers/#toc_checkboxes). This is just wrapping Ember.Checkbox anyway.
Second, if you want to update the value of isSelected, the "Ember Way" is to use two-way data bindings. Your code uses one-way data-binding when it reads document.isSelected and then tries to manually re-create the the data-binding in the other direction when the user clicks by manually writing a selectDocument action and calling it from an {{action}}.
Instead, simply bind the Ember Handlebars Input Helper directly to your value like this:
{{#each document in documents}}
<div class="col-md-6">{{input type="checkbox" checked=document.isSelected}} {{document.name}}</div>
{{/each}}
I have a list and I'd like to set one item as class="active" automatically. Given the following bootstrap code:
<ul class="nav">
<li {{bindAttr class="atIndex:active"}}>{{#linkTo "index"}}Index{{/linkTo}}</li>
<li {{bindAttr class="atAbout:active"}}>{{#linkTo "about"}}About{{/linkTo}}</li>
<li {{bindAttr class="atLogin:active"}}>{{#linkTo "login"}}Login{{/linkTo}}</li>
</ul>
atIndex, atAbout and atLogin reside in my ApplicationController.
To render as:
<ul class="nav">
<li class="active"><a...>Index{{/linkTo}}</li>
<li><a...>About<a></li>
<li><a...>Login<a></li>
</ul>
What's the best way to do this with Ember 1.0 pre4? I'd rather not add special code to every view or controller.
PS - atIndex: true works, but atIndex: function() {return true; }.property().volatile() does not. Which makes me think I'm doing something wrong.
Thank you!
{{#link-to "dashboard" tagName="li" href=false}}
<a {{bind-attr href="view.href"}}>
Dashboard
</a>
{{/link-to}}
By far the cleanest way to solve this is by taking advantage of the linkTo helper's built-in support for setting the active class when rendering links. AFAIK this is not yet documented other than in the source code:
implementation: https://github.com/emberjs/ember.js/blob/master/packages/ember-routing/lib/helpers/link_to.js#L46
example: https://github.com/emberjs/ember.js/blob/master/packages/ember/tests/helpers/link_to_test.js#L120
To take advantage of this feature just adjust your css to style based on having an active class on the link instead of the li element. If you really need to style the li you can create a custom view and helper that extends Ember.LinkView and uses an li but changing css will be far easier.
--- UPDATE ----
Since we all love twitter bootstrap just changing the css is perhaps not such a great option. In that case, the following will do the trick:
App.ApplicationView = Ember.View.extend({
currentPathDidChange: function() {
Ember.run.next( this, function() {
this.$("ul.nav li:has(>a.active)").addClass('active');
this.$("ul.nav li:not(:has(>a.active))").removeClass('active');
});
}.observes('controller.currentPath')
});
Working example using ember linkTo helper with bootstrap pills: http://jsbin.com/ekobod/5/edit (requires ember-1.0.0-pre.4)
the active route's path is updated automatically in the ApplicationController via currentPath so I did something like that in my App...
In ApplicationController added properties like so:
isProductsActive: function(){
if ( this.get('currentPath') === 'products' ) return 'active';
else return '';
}.property('currentPath')
and in my ApplicationView template:
<li {{bindAttr class="isProductsActive"}}>
{{#linkTo "products"}}Products{{/linkTo}}
</li>
I made an ember-cli addon that handles this:
https://github.com/alexspeller/ember-cli-active-link-wrapper
EDIT:
Finally, the best way I've found to use the activate class of bootstrap li element using ember.js of the link.
{{#linkTo "dives" tagName="li"}}
<a {{bindAttr href="view.href"}}>Dives</a>
{{/linkTo}}
--------------8<--------------
DEPRECATED:
I guess the previous answers were relevant before Ember.js introduced the activeClass attribute for linkTo helper.
Now I would solve the problem like this :
<ul class="nav">
<li >{{#linkTo "index" activeClass="active"}}Index{{/linkTo}}</li>
<li >{{#linkTo "about" activeClass="active}}About{{/linkTo}}</li>
<li >{{#linkTo "login" activeClass="active}}Login{{/linkTo}}</li>
</ul>
Enber will automatically add the class when relevant.
If I may suggest another solution that requires nothing but Handlebars:
<li {{bind-attr class="view.innerLink.active:active"}}>
{{#link-to "path" viewName="innerLink"}}Click{{/link-to}}
</li>
This sets the LinkView object as a member of the parent view, which's active attribute you can then reference.
I found a pretty simple Solution using linked items in a list group(http://getbootstrap.com/components/#list-group-linked).
<div class="list-group">
{{#each thing in list}}
{{#link-to "details" thing.id tagName="a" href="view.href" class="list-group-item" {{thing.name}} {{/link-to}}
{{/each}}
</div>
Works with Bootstrap v3.1.1 and Ember v1.7.0
Just nest the {{link-to}} with a tagName on the outer one. I'm doing this on EmberJS 2.0.
{{#link-to "admin.websocket" tagName="li"}}
{{#link-to "admin.websocket"}}WebSocket{{/link-to}}
{{/link-to}}
If you want to use Bootstrap navigation in Ember then you can use Bootstrap for Ember that has out of the box support for this:
Github: https://github.com/ember-addons/bootstrap-for-ember
Demo: http://ember-addons.github.io/bootstrap-for-ember/dist/#/show_components/tabs
A lot of these answers are outdated. Here is a much cleaner (and DRY) version for Bootstrap and Ember 2.x:
{{#link-to "index" tagName="li" as |link|}}
Index Page
{{/link-to}}
I solved a similar problem by creating a view for each item and using classNameBindings (I have to say that i don't have a HTML list, i.e.<a>...</a> in my app, just list of <div>).
Here is the way it works for me:
In tasklist.handlebars i iterate over my custom view
{{#each tasks}}
{{view App.TaskListItemView contentBinding="this"....}}
{{/each}}
Ember will insert a view (i. e. <div>) for each item.
The view class for each item is defined in task_list_item_view.js as
App.TaskListItemView = Ember.View.extend({
controller: null,
classNameBindings: ['isSelected', 'isClosed'],
isClosed: function() {
var content = this.get('content');
return content && !content.isOpen(new Date);
}.property('controller.content.#each'),
isSelected: function() {
return (this.get('controller').isSelectedTask(this.get('content')));
}.property('controller.taskSelection.#each'),
....
});
Finally the template for the view just renders my link in tasklistitem.handlebars
<a {{action "selectTask" view.content target="view"}} rel="tooltip"
{{bindAttr title="view.content.comment"}} class="taskListLink">
....
</a>
AFAIK you have to specify the source data in the property() call to let ember know when to (re-) evaluate the property.
Hope that helps
I went with:
Ember.LinkView.reopen({
didInsertElement:function(){
if(this.$().hasClass('active')){
this.$().parent().addClass('active');
}
}
});
I didn't want to use the accepted answer as I wanted to keep my li elements as plain old html. There might be a better way to check the active state but I couldn't get access to the right property.
I have an ember.js app. which shows a list of objects (let's call them Post objects) using posts.handlebars. Each list item contains a link to show the details for that Post (post.handlebars).
Both the list item and the detail page contain a delete link which removes the object from the collection of Posts. Since there's no difference in implementation except for the label that show the link, it makes sense to keep it DRY.
The current code is working:
# router
App.Router = Em.Router.extend({
...
"delete": function(router, event) {
var post = event.context;
if (confirm("Are you sure you want to delete the post with title '" + (post.get('title')) + "'?")) {
post.deleteRecord();
post.store.commit();
App.router.transitionTo('posts.index');
}
}
});
# posts.handlebars
<ul>
{{#each post in controller}}
<li>
{{post.title}}
<a {{action delete post}}>x</a>
</li>
{{/each}}
</ul>
# post.handlebars
<p>{{title}}</p>
<a {{action delete content}}>Destroy</a>
But I don't want to repeat the code that contains the delete action.
My next best guess is to define a view and re-use this in both templates.
However, now I'm not able to pass the Post object as context to the action by moving it to a view (I might be doing something rong).
By moving the event from the router to the view I got it working, but that doesn't feel right.
My current solution looks like this:
App.DeletePostView = Em.View.extend({
mouseUp: function(event) {
var id, post;
id = this.get('content.id');
post = App.Post.find(id);
if (confirm("Are you sure you want to delete the post with title '" + (post.get('title')) + "'?")) {
post.deleteRecord();
post.store.commit();
App.router.transitionTo('posts.index');
}
}
});
# posts.handlebars
<ul>
{{#each post in controller}}
<li>
{{post.title}}
{{#view App.DeletePostView contentBinding="post"}}
x
{{/view}}
</li>
{{/each}}
</ul>
# post.handlebars
<p>{{title}}</p>
<div>
{{#view App.DeletePostView contentBinding="this"}}
Destroy
{{/view}}
</div>
Does anyone know if there is a better approach if I want to re-use a handlebars action helper?