Skip to content

Instantly share code, notes, and snippets.

@SweeD
Created December 7, 2012 07:53
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save SweeD/4231561 to your computer and use it in GitHub Desktop.
Save SweeD/4231561 to your computer and use it in GitHub Desktop.
EmberJS - Dynamic breadcrumb rendering (with action as variable)
<!---- Version 1 with #each -->
<ul class="breadcrumb">
{{#each view.breadcrumbElements}}
<li><a {{action lastObject href=true}}>{{firstObject}}</a><span class="divider">/</span></li>
{{/each}}
</ul>
<!--- Version 2 with custom helper -->
<ul class="breadcrumb">
{{renderBreadcrumb view.breadcrumb}}
</ul>
App.Breadcrumb = Ember.Object.extend
elements: null
init: ->
@_super
@set('elements', [])
reset: ->
@get('elements').clear()
# ....
App.BreadcrumbView = Ember.View.extend
templateName: 'general/breadcrumb'
breadcrumbElementsBinding: 'App.breadcrumb.elements'
breadcrumbBinding: 'App.breadcrumb'
breadcrumbDimension: (->
@get('breadcrumbElements.length')
).property('breadcrumbElements')
Handlebars.registerHelper 'renderBreadcrumb', (property, options) ->
value = Ember.Handlebars.get(this, property, options);
breadcrumbString = ""
value.get('elements').forEach (element, index) ->
breadcrumbString = breadcrumbString +
"<li><a {{action #{element.get('lastObject')} href=true}}>#{element.get('firstObject')}</a>" +
'<span class="divider">/</span></li>'
return new Handlebars.SafeString(breadcrumbString)
@SweeD
Copy link
Author

SweeD commented Dec 7, 2012

When the breadcrumb should get rendered, the value of App.breadcrumb.elements is [ ['Start', 'showPortal'], ['Account', 'showPortalAccount'], ...] # Pair of Label and action name

In Version 1 I get Problems with giving the action as a variable ( lastObject ) and in Version 2 i get the right look of the rendered html but the links does not trigger the action (wrong href attribute set).
I.e. instead of

<a href='/portal'>Start</a>

i got

<a href='http://localhost:3000/true%7D%7D'>Start</a>

I tried a lot of different versions and none of them have worked, so i guess, iam doing something basic wrong, right?
Thanks for helping! ❤️

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment